5
Tried using CSS Grid over Flexbox for my first real layout project
I've been messing around with HTML and CSS for about two months now, mostly following tutorials. Last weekend I finally built a simple portfolio page from scratch. I started with Flexbox because that's what all the beginner courses teach, and it worked okay for the header and nav. But when I got to the main content section with three columns and a sidebar, I spent like 4 hours trying to get the spacing right with margins and wrapping. Almost gave up, then a buddy from a coding meetup in Austin told me to try CSS Grid instead. Set it up in 15 minutes, no joke. Grid is way more intuitive for laying out pages in rows and columns, and I didn't have to mess with any hacks. Has anyone else found that Grid clicks faster once you get past the basic tutorials?
3 comments
Log in to join the discussion
Log In3 Comments
the_terry1d ago
Funny how that works, isn't it? Spent four hours wrestling with Flexbox for something Grid does in fifteen minutes. Reminds me of the time I tried to use a screwdriver to hammer a nail - it technically works, but you sure feel dumb afterwards. Grid is just a better fit for page layouts, plain and simple. Flexbox is great for lining up stuff in a straight line like a toolbar or a row of buttons. But once you need actual columns and rows with different sizes, Grid is like magic. That said, I'm still going to defend Flexbox for basic nav bars until my dying day.
5
Yeah flexbox is great for one direction but grid just makes sense for actual layouts. My buddy runs a small web design gig and we were building his personal site last year. He spent weeks tweaking flexbox for a three column section with uneven content heights and it kept breaking on mobile. I told him to try grid, he was pissed it worked in ten minutes. Now he swears by it for everything. But I still use flexbox for nav bars and button groups because it handles spacing and alignment way cleaner without all the grid template nonsense.
4
Stick with Grid for any layout that looks like a table or has multiple columns and rows. Just keep Flexbox for the simple stuff like a single row of links or centering a button in a div.
2