Skip to content
Submitted 9 months ago

CSS grid, CSS flexbox

Itoro (Celine) James•200
@CelineJames
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I cant really say, it has really been challenging, i stayed the longest on this project, really had a hard time on the grid layout and bringing the cards together in that way, did try something but it felt wrong to do it that way.

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

The grid layout was my major challenge, i combined the grid layout and positioning, i was not really sure it was going to work out at all, but it somehow did.

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

i would return and take more lessons on css grid, but it was really challenging, then ill do a refactor of the code and design.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Hamza Naeem•260
    @hamzafrontend

    Its no doubt a really good try, follow mobile design first approach, make the main tag display grid for small screen and for bigger screen make 3 columns using grid-template-column and make 3 cols, inside the main place 2 individual cards, and remaining 2 cards wrap them in a div and then put these 3 divs inside a main, and on big screen when you have 3 columns the desired layout would be ready, you could check my solution on my profile as well, if you want any help, feel free to message me.

    Thanks, Hamza N.

    Marked as helpful
  • P
    MikDra1•7,450
    @MikDra1

    Nice one 😀

    If you are curious how you can do this straight lines on the top of each card here is my tip:

    Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

    Hope you found this comment helpful 💗

    Good job and keep going 😁😊😉

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