Skip to content
Submitted 3 months ago

four-card-feature-section-master

AymaneOnline•330
@AymaneOnline
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?

I've already done this challenge before, but I did again because it's included in the learning path so all good. I've used this time sass and lighthouse which I didn't last time.

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

I tried to do it using CSS grid and not adding the .column and .column-2 classes but I failed, I'm curious to know if that's possible.

Community feedback

  • haquanq ®️•1,585
    @haquanqPosted 3 months ago

    Hey @AymaneOnline,

    It is totally possible to complete this solution using display: grid.

    How does it work

    • You need to flatten each card inside it HTML structure instead of grouping 2 cards inside a div in the middle.
    • After setting display: grid on cards container, you can manipulate each card's position on the grid with grid-column, grid-row. For example if i want to change .first-card row position:
    .first-card {
     /* position at row from 2, end at 3 (same to grid-column)*/
    grid-row: 2/3;
}
    • To align each card in it's zone (grid divided zone), use align-self, justify-self.

    You can check out my solution for this challenge for more references.

    Play around these properties above and let me know if you need further example!

    Marked as helpful
    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