Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section | Mobile First | Flexbox | CSS Grid.

@faruquedewan

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I tried completing this challenge using CSS Flexbox but couldn't figure it out. So, learnt CSS Grid and completed this using that. Is it possible using Flexbox? Also, what exactly is the difference between Flexbox and Grid (Didn't even understand the 2D and 3D aspect of them)?

Community feedback

P

@Fanushhh

Posted

Hello there,

First of all, you did a good job on the challenge so keep it up! :D

The difference between grid and flexbox is mainly that flexbox is used to align items in a single row or column, say a container, it doesn't really handle multiple rows well whereas grid is amazing at that because it has a two dimensional layout(think of it like an excel table while flexbox is more like a word document), you define multiple rows and columns where you wanna place items just like you figured out in this challenge. And to answer your question, yes, I believe it can be done in flexbox as well and what you will also learn on this platform the most is the variety of ways you can do things.

Don't feel bad you couldn't do this challenge with flexbox, in order to grow you have to get out of your comfort zone and experiment on new things. I remember my first time trying flexbox was amazing, the ease of arranging elements on the page, then I had to learn grid which was an imaginary nightmare because I was so comfortable using flex but reality is, some things are flex and some things are grid.

Not sure if my feedback helps, but keep it up, you're doing good, stay hungry!

Marked as helpful

0

@faruquedewan

Posted

@Fanushhh Thanks. I did some research myself this evening and it turns out that little bit of everything makes the greatest codes. Let it be float, flex, grid or whatever, nothing replaces anything completely.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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