Four card feature section (mobile-first approach)

Community feedback

• 

  Huy Phan•2,060

  @huyphan2210Posted about 1 month ago

  Hi, @Lonlysoft

  I checked out your solution and I have some thoughts:

  • "Easy" can be subjective. It really depends on your familiarity with Flexbox or Grid. There's no hard rule that says you must use one over the other.
  • I suggest considering whether your code can scale. For example, what happens if more than four cards are added? Can your current setup handle a fifth card, or beyond? It's important to think about how to write concise CSS that can support more cards while maintaining the layout. To decide between Flexbox or Grid, it helps to have a solid understanding of both, so research and practice are key.
  • In this specific case, can you use Grid instead of Flexbox? Absolutely. Since the cards are in a 3-column layout, you could approach it like this:

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
  }
  
  .card {
    /*Your styles here*/
  }
  
  .card:nth-child(1) {
    grid-column: 1; /* Place first card in the first column */
  }
  
  .card:nth-child(2),
  .card:nth-child(3) {
    grid-column: 2; /* Place the second and third cards in the second (middle) column */
  }
  
  .card:nth-child(4) {
    grid-column: 3; /* Place the fourth card in the third column */
  }
  

  While this code works for the current case, it doesn't scale well if a fifth card is added, so I'd normally avoid this approach. What can you change to make the code above scale? Try to think about it.

  Hope this helps!

  0