Skip to content
Submitted over 2 years ago

Mobile First four card feature using Grid & Flexbox

Rom•780
@RomWeb3
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

I'm not sure about my grid template, is it good? To place the grid I used margin-top, is there a better way to do it? Thanks :)

Community feedback

  • Alan Ibarra•440
    @Ibarra11Posted over 2 years ago

    Your solution is not bad, but I think it can be improved using some of grids features. The approach I took is for the first and third grid items to span 2 rows. After that I just used align-self: center on them to center them within the two rows. Now you can remove margin from the karma card it aligns itself perfectly.

    .box1, .box4{
 grid-row: span 2;
align-self: center;
}
    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