Four card feature section Flex/Grid mix

Community feedback

• 

  P

  Scott•310

  @ldgPosted about 1 month ago

  Hi Mattef, Good work on this project, the mobile view and Desktop view both work well.

  Regarding your question about getting the individual cards to move to the location you want; you can do this after you set up your grid. For example, if you where creating a 3 column grid with 2 rows you'd do like this:

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  

  At first when you set this all your cards will be stuffed into the first column on the top row. The way you move those cards to different locations is with the grid-column: and grid-row: commands.

  For example, if you have just 2 cards in this grid, and you want card1 on the top right side, and card2 on the bottom left side, you'd do something like this:

  .card1 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  }
  
  .card2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  }
  

  In the above css, the numbers correspond to line numbers in the grid. Since this is a 3 column grid, we have 4 column lines in total, each numbered 1(start), 2(next col), 3(next col) and 4(end). So for .card1 the card is positioned at the start of line 3, and extends all the way to line 4, which is the last column in the 3 column grid.

  The same thing goes for the rows, we have a 2 row grid, so there are a total of 3 row lines 1(top), 2(middle) and 3(end). The numbers in grid-row put the card in the top row, on the right side.

  Using this method you can use @media queries to just change the numbers in the grid-column and grid-row properties for different screen sizes to place the cards where you want depending on the screen size.

  I recommend checking out Kevin Powell's video on learning Grid CSS video, I found it to be incredibly helpful for me when I was starting to play around with Grid CSS.

  Marked as helpful

  0