Skip to content
Submitted about 12 hours ago

Bento-grid-main solution using CSS Flexbox and Grid

masalatimothy•100
@masalatimothy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Bento grid
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of my CSS skills, this project helped me to rate my advanced CSS skills specially on Grid Layout, I've learnt new techniques and got more experience on CSS

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

I encountered challenges about organizing the seventh and the last section on the desktop design, to align them in the left side of the page, and making them to be higher that the others. So I overcame that by giving the seventh a specific height and using the margin-top property in the last section

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

I would like any feedback on the solution, about the Grid layout specially on the desktop design, and also about the devices breakpoint so I can know if I've respected the W3C recommendations

Community feedback

  • tOnski86•260
    @tOnski86Posted about 10 hours ago

    This is well executed - great job! Here's my suggestion:

    Constructing your grid

    • Using a mobile first design, I would start with the smallest viewport of the project (I think it's at 375px). Create a single-column grid and style each card accordingly.

    • Once you're done with the design, you can create your desktop grid. I haven't started this challenge so I'm just assuming this is a 4x3. Instead of simply setting your grid-template-rows and grid-template-columns to auto, you can explicitly define the grid accordingly e.g. grid-template-columns: repeat(4(1fr)). This creates a grid with 4 equal columns. Check out the minmax function here as well for responsive grids.

    • Once the grid template is defined, you can then place your cards in the grid using the grid item properties: grid-row, grid-col or if you prefer grid-area etc. etc. and span and order accordingly. There are countless approaches to position your items but this would be exponentially easier since you already have your grid setup.

    Once you're comfortable with this, you can add a medium breakpoint as well.

    Separating styling the grid vs the card layouts would make this easier IMO. Try out what works for you and feel free to ask if you have questions.

    Best of luck and keep going!

    Marked as helpful
    0
    masalatimothy•100
    @masalatimothyPosted 17 minutes ago

    @tOnski86 Thanks for the feedback! I've really appreciated

    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