Skip to content
Submitted 8 months ago

Four Card Feature Section Using CSS Grid

Anthony•60
@codimaniac
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?

It was my first time using CSS grid and I'm glad it went easy.

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

I found it difficult aligning the cards at the center of the column in desktop design but after few trials I was able to solve it using align-self: center; on the child element.

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

While checking the compatibility with various screens, I noticed the desktop design on some large screen are not properly aligned and despite several attempt to fix this issue, I couldn't come up with a solution that doesn't involve changing the display from grid to flex.

Community feedback

  • Boris•2,850
    @mkborisPosted 8 months ago

    Hi Anthony, great job, to get it properly aligned on large screens add place-content: center; on your .grid-container.

    Also, some suggestions

    • All content should be wrapped within landmarks. Wrap a main tag around your content.
    • You should have only one H1 per page.
    Marked as helpful
    1
    Anthony•60
    @codimaniacPosted 8 months ago

    Thanks @mkboris, I will make the corrections.

    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