Four card feature section with overuse of flex-box

Community feedback

• 

  WandoCode•840

  @WandolePosted almost 2 years ago

  Hey,

  For the position of your 4 cards, you could try to use 'grid' instead of 'flex'. Grid is a little bit more complicated than flex, but it's easier to have something consistent with it for that kind of layout I think.

  You put The 4 cards inside of a container with 'grid and then you configure the grid to have 2 rows and 3 columns.

  Something like:

  .container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);  
  }
  

  Then, you have to tell to each of your cards how to take place in that grid. For the card on the left (it have to take 2 cells: the 1st column entirely), you can try something like:

  .left-card{
     grid-column: 1 / 2;
     grid-rows: 1 / 3;
     align-self: center;  // Put the card in th center of the column
  }
  

  I have not tested those values, maybe it's not exactly the good ones ! But you can manage to place correctly the four cards using these propreties! (https://css-tricks.com/snippets/css/complete-guide-grid/)

  For the gutters between cards, juste use the 'gap' property!

  I've made that challenge using flex too a few month ago (with problems too haha). But now that I dived more into grid, I think it would be better to use it!

  Have a good day :-)

  Edit: To center the container on the screen, give it a width (or max-width) if needed and put 'margin-inline: auto' to it.

  Marked as helpful

  1

  ---

  

  Dedeepya Avancha•30

  @Dd1235Posted almost 2 years ago

  @Wandole Thanks a lot, this was really helpful! BTW had to use grid-area to place the left and right cards at the center as grid-row:1/2; align-self:center ; seem to be placing it at the center of only the first row.

  0
• 

  WandoCode•840

  @WandolePosted almost 2 years ago

  Thanks for the answer!

  If you only used what I wrote, it's normal: the .left-card is the container of the card on the left (the 1st row) and it places only that card correctly.

  You have to create something quite similar for the card on the right! It's almost the same except for the grid-column property.

  https://codepen.io/timanfaya2/pen/KKZMebJ

  0