I'm officially over Flexbox. I'm only using CSS Grid from now on.

Flexbox takes too long to setup responsive layouts. After using grid more, I realized that Flexbox is dead to me. What do you think?

Join the Pixel Geek Community:

-------

I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.

The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.

-------

Like what you see? Subscribe here:

-------

[annettekempers]

Exactly my experience!! Grids do have a steep learning curve, but they are super useful! Thanks for demonstrating, it's getting clear now!

[benjaminbachman]

I like the sound Grid makes when you pressed the button to flip it. :)

[Mel-kwoo]

I really like your enthusiasm, you're so happy! Your tutorials are fantastic. I test the CSS grid, and I love it; I begin in webflow, and the CSS grid is my favorite design method for sure...

[kiakamgar]

Great timing! I was thinking of using Grid but couldn't figure my footer design out, but 6:25 got me thinking and experimenting, now... DONE!

Cheers! 🤓👍

[lukasrudrof]

Awesome demonstration :D Will use CSS grid now more often!

[jackiee]

Thanks for sharing an example!! Super helpful to see the difference in real situations.

[carpathianshepherdess]

Grid all the things! This video was great, thank you. I was struggling with the same process of design and thought 'there has to be a more efficient way to do this'. I love your videos! ^_^

[MentLeee]

You do realize that grid uses Flex features, that’s the reason it is so powerful. Try putting a div box inside of the grid to get the full value. Also I’m very new to this and your videos are very informative. Thank you!

[MrSpertuzm]

NEW intro? thanks for the content! always very helpful the tips and the approach!

[turok]

Grid gap works also with display flex.. but webflow did really good job with visual edits of grid so it looks like a better solution

[jpthedio]

I use invisible spacers of divs. Like 20x 20 pixels in between elements, so they act as padding for both horizontal and vertical layout. 😁

[whipstitchwebwork]

I haven't watched the vid yet, but I said the same thing two years ago. No. Flex has it's places where it is a much easier choice and outshines grid, they both have limitations...however using the two together...powerful stuff. Really nothing they can't do. A pre thanks for the video.

[thriftyultra]

Why does it have to be one or the other? Most productive thing is to combine both. Css grid for general layout and flexbox for smaller elements.

You have to remember that the annoying thing about css grids is that not all changes carry over to grids on other pages with the same class. Like if you changed the layout distribution on mobile or something you’ll have to go through each page to make sure it works.

About flipping, what i was doing before css grid came is i would put the width like 45% for both elements and make them justify left and right so when you flip them you basically have the same gap. Although obviously on mobile spacing adjustments need to be made.

[gmcwhinney]

Hey Nelson. We've just used Grid in as many places as possible on our latest client web project and it worked a treat but would you believe it, they happen to use IE11 a lot in their organisation and so the site is looking pretty broken right at the moment! Can you do a follow up video recommending how to cope with this situation please?

[austinjames]

This is interesting.. I hear your view. I usually set my flex cols to like 47.5% so when I flex the row they have an automatic spacer built in 👀

[great]

You can also merge grids really easily

[aprodan]

I think there are limitations for some interactions where you could let the whole panel expand naturally. I wouldn't nuke it completely

[michaelcarnevale]

i was thinking the same thing recently but was worried that i was "wrong" somehow... ya i think i'll also start using grid for simple responsive section components as well

[dzenish.]

Actually, to create the best, most responsive, and dynamic layout you would use Flex inside of your Grid containers.

[badboygoodgirl]

Very nice, thanks for sharing.

As a dev that is just writing CSS, I can say it isn’t as time consuming. Maybe webflow needs to revisit the UI for flexbox? I mean, with CSS you could have literally just reordered the image & text without an extra class at whatever breakpoint you wanted, super easy.