Submitted 9 months ago

4 Card feature

Kieren Woods•60

@KierenLWoods

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I struggled when trying to set the columns for the desktop version of the design.

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

I would like feedback on how i have tackled this problem as i feel, there is a much easier way to do this and have kind of come up with a hacky solution.

Community feedback

Stefan Holmgren•220

@stefan-holmgrenPosted 8 months ago

There's some differences in the design, but you know that already.

The grid was a problem to get right for me - but I thought I'd share my code, since it's a bit different from yours (although I'm not saying mine is correct in any way, but still, just to give another perspective):

  ul {
    display: grid
    grid-template-columns: content content content;
    grid-template-rows: content content;
    gap: 1.875rem;
  }

  li:first-child {
    grid-area: 1 / 1 / 3 / 1;
    margin: auto;
  }

  li:last-child {
    margin: auto;
    grid-area: 1 / 3 / 3 / 3;
  }

Mine is just saying that the first and last child should span some rows (why it ended up with 3 instead of 2 I can't explain, but 2 wasn't enough for some reason).

Please log in to post a comment

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