Skip to content
Submitted over 5 years ago

Four card feature section attempt with CSS grid

Chloe•240
@cguttweb
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm attempting to use grid, but struggling with alignment of the boxes on desktop. I wonder if perhaps I would be better off using flexbox instead? Any feedback appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Alex•1,090
    @AlexBueckig

    Hi Chloe,

    this project is a perfect exercise for using grid! You can play around with a lot of things like grid template areas (basically named parts of your grid which you can assign to specific parts of your html.)

    If you really want to stick with it, don't switch over to flexbox for this one. Wes Bos has a great free course on Grid, you can find it in the resources section here on the website.

    Now its time for some real feedback! 😅 I saw you wrapping your whole content inside a single grid. I approached this a bit differently. I created two sections, one for the header part and one for the 4 cards. I then used grid to position the cards, while just using block level elements (which is the default display property for all sections, divs, paragraphs, etc.) for the header. Feel free to check out my code, there you can see how I achieved it using grid with grid-template-areas. 😃

    If you have any specific questions using grid, feel free to ask! 😇

    Keep up the great work! 👍

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