Responsive Card Section Using Grid

Community feedback

• 

  Anis Bacha•500

  @AnisBachaPosted about 1 year ago

  Great work figuring out a solution!

  For the Grid Layout, you can achieve the desired outcome by setting up 3 columns and 2 rows. Make sure the first card extends to the first column and spans 2 rows, and center it vertically. Apply the same method for the last card, ensuring it aligns with the last column. As for the second column, simply adjust the cards to their intended positions.

  Here's a rough representation of the code:

  .main__cards{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-auto-rows: 1fr 1fr;
     align-items: center;  /* this will center the supervisor and the calculator cards */
  }
  .main__supervisor{
     grid-column: 1/2;
     grid-row: 1/3;
  }
  .main__calculator{
     grid-column:3/4 ; 
     grid-row: 1/3;
  }
  .main__team-builder{
     grid-column: 2/3;
     grid-row: 1/2;
   }
  .main__karma{
     grid-column: 2/3;
     grid-row: 2/3;
  }
  

  Remember to adjust the class names to match your specific implementation. Let me know if you need further assistance with this.

  Marked as helpful

  0

  ---

  

  Tony Appiah•160

  @TonyAppiahPosted about 1 year ago

  @AnisBacha

  Thank you very much Anis for your help. I had a jaw dropping moment when I implemented your code.😂 The layout was simply achieved, whiles maintaining responsiveness! Shucks!!! Thanks again.

  I do have a follow up question. How are you able to tell the number of columns and rows needed (using Grid of course), in order to achieve the desired outcome? This project for example.

  0

  

  Anis Bacha•500

  @AnisBachaPosted about 1 year ago

  @TonyAppiah Glad that Worked!

  I think you should remember that you have the flexibility to position your cards in any way you like within the grid layout. This will aid you in determining the ideal number of columns and rows for your specific grid layout based on the actual design.

  In this example, With the understanding that I can adjust the cards position in the grid layout as I want using grid-column, grid-row , align-items properties and others, I'll base my decision on the three visible columns and also the two visible rows from the design.

  0

  

  Tony Appiah•160

  @TonyAppiahPosted about 1 year ago

  @AnisBacha

  Much appreciated Anis.

  1