Skip to content
Submitted 6 months ago

Four card feature section flex, grid, sass

yoyov51234•240
@yoyov51234
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

What are you most proud of, and what would you do differently next time?

1, I finished this project after 3 days.... I didn't give up. 2, I have a deeper understanding of the rank of the classes

What challenges did you encounter, and how did you overcome them?

In the end , I made the 1440 view using a grid, but the grid-gap is fixed, but when the screen goes larger, the vertical gaps between the divs are no longer the same.

What specific areas of your project would you like help with?

For the minimal size, how to define it's minimal enough and the cards shouldn't shrink anymore?

Community feedback

  • Divadovitch•190
    @DivadovitchPosted 6 months ago

    Hi yoyov51234,

    Congratulations on this project.

    For the minimal size I think you can use minmax like minmax(350px, 1fr) so 350px in this case is the minimal size and 1fr is the maximal size, in this way the size of the cards will not shrink past 350px.

    For the minmax and the use of auto-fill in use with css grid, you can read this article.

    This minimum size will be determined based on the content and the readability of the card. It's more of a design choice.

    Hope this help

    Marked as helpful
    0
    yoyov51234•240
    @yoyov51234Posted 6 months ago

    @Divadovitch

    Thank you for the suggestion! I will look through the article and update the code : )

    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