Skip to content
Submitted about 2 years ago

Four card feature section

Lenez•440
@lenez12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. i confused what the best practice to create a responsive layout, in this case i have use css grid, can you explain to me what should i choose flexbox or grid css
  2. in another code i see someone using article tag for create the card component, isn't using div tag is more relevan?

Community feedback

  • Ian•150
    @blndcatPosted about 2 years ago

    Hi Lenez,

    1. Here's my take on choosing between grid and flexbox for responsive layouts. In many cases what you can achieve with either will overlap. So in some cases it doesn't matter, however some things can be more easily implemented with one rather than the other. I learnt a lot by first using one for a layout and then trying to redo it in the other.

    I tend to use grid for the general structure (skeleton-like) layout, and flex for individual details of components (things like navigation or a row of social media icons inside a card).

    1. As for article vs div, article is actually quite a general purpose tag/container, it isn't just for news/literary articles. It can be used for elements/components that repeat on the page and are similar in structure but have different info, like people profiles, testimonials, and yes things like blog posts.

    Hope that helps!

    1
  • Lenez•440
    @lenez12Posted about 2 years ago

    Hi Ian, thanks for explain to me, that helping me nicely to understand the big picture about the case.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord