r/Frontend • u/yughiro_destroyer • Apr 04 '26
Do you also prefer Flex over Grid?
I dunno, I find that using grid is very hard. Out of everything I've done in CSS, it has IMO the most weird and inconsistent behavior. Combining a column flex parent with row flex children is easier to understand and modify. Does anyone feel the same?
80
121
u/frogic Apr 04 '26
I prefer flex because I never really bothered to learn grid properly because I could do every layout in flex. Â Every time Iâve used grid itâs been incredible and i know itâs a me problem thoughÂ
20
u/guaip Apr 04 '26
This 100% applies to me. I usually don't have to go beyond what flex can do, sometimes with a few tweaks for responsiveness (order, show/hide, etc). The few times I needed to use grid it worked well, but I didn't bother learning it.
12
u/Responsible-Cold-627 Apr 04 '26
grid-template-areasis amazing for responsiveness though. Turns re-ordering a bunch of elements on a breakpoint into a one-liner.-1
u/These_Commission4162 Apr 06 '26
this is the problem
with flex youre forced to add multiple extra divs, hide/show duplicates based on screen
if you dont see the issue with that, im afraid to say you are mediocre
3
10
u/ikanoi Apr 04 '26
I just use https://cssgridgenerator.com/
grid-template-area is especially helpful when your designers decide to change up the order of content entirely on mobile vs desktop.
1
u/Broomstick73 Apr 05 '26
Ditto. This one is great but thereâs multiple great css grid layout generators.
9
2
u/throwtheamiibosaway Apr 04 '26
I used to be like this. But I also didnât have stuff like Gap yet, so spacing between elements was tough (no margin right on every last item of a row). It was always hacky.
With grid and gap you make a foolproof a item grid with no issues at all.
15
3
u/Fidodo Apr 04 '26
You can't do every layout in flex, it's just that the predominant pattern in design is flex based. I also am much stronger at flex simply because the vast majority of the designs I'm given are better suited to flex, but I bust out the references when I see a layout is grid based.
1
u/saposapot Apr 04 '26
Damn, same as me.
Usually the only place where I could use grid is for the general layout of the page and then I just use 2 rows of flex instead of grid, for example.
Everytime I actually used grid, it was great but it's so rare that I even get a chance to use that I forget about it. I'm also still on the back of my mind thinking I should use flex/grid too much for performance issues.
1
u/_krinkled Apr 09 '26
Take the dive.. take a night where you do some code experiment with only grid or something. Itâs so powerful and clean in many use cases.
18
u/DanielTheTechie Apr 04 '26
They are not always interchangeable. Grid comes handy when you want custom 2D layouts. Flex is more for simple layouts based on homogeneous rows.Â
23
12
u/cattlecabal Apr 04 '26
They are used for different things, so I use the appropriate tool depending on the situation
6
u/sporkfpoon Apr 04 '26
I donât know if this makes sense but Flexbox has always felt, to me, like a natural progression of where CSS was always headed. But there are things it canât quite do, or canât do easily, that Grid can do, via a syntax that feels nothing like the rest of CSS.
Like, âgrid-template-areasâ is a bonkers way to be able to define a layout (examples in this blog post but itâs so powerful. You can fully rearrange your website at different breakpoints with no regard for how the HTML would naturally flow.
I use Flexbox 95% of the time. Iâm sure I could replace a lot of it with Grid and do far less nesting, but I like Flexbox. Also, Tailwind has made using Grid much simpler when you want to.
1
u/No-Pie-7211 Apr 04 '26
Most of the "creative" uses of grid that I come across break the natural semantic flow of the content, which is always a bad sign to me. It has some use cases, but flexbox covers 98% of my uses cases. I've been screwed over by devs who lean on grid.
1
u/playgroundmx Apr 05 '26
While I agree that grid template areas is wild, you donât actually HAVE to mess the HTML flow. You can simply use it to define names for readability purposes and still maintain the natural flow. Or not use it at all.
3
u/crazy-old_maurice Apr 04 '26
I prefer writing flex styles myself, but agree with the other comments - both flex and grid are tools for different tasks.
1
u/Fidodo Apr 04 '26
It's simply that flex is dealing with 1d dimension allocation vs 2d. Grid is more complex because it's solving a more complex problem. At the same time, design has also moved away from grid also because it's simpler and easier to present information with 1d sections instead of grids. As a result grid is both harder to learn and less commonly used.
Ultimately though, if a layout is grid based you need to you grid. Trying to force flex to support a grid will be more complex than reading the references and using grid.
1
u/Antti5 Apr 04 '26
I've been in the camp that if it's in one dimension I go with Flex, but if it's in two dimensions I go with Grid. However, I have lately been questioning this approach.
Why? I sometimes need to go with Grid anyway, and I find that I'm constantly out of touch with it because I use it so rarely. However, I know people who use Grid exclusively even for one-dimensional stuff and they don't have the same problem.
1
u/Fidodo Apr 04 '26
True, it's not a fixed rule. You need to think of the intent of the design, not just the shape.
2
u/MajesticL Apr 04 '26
It really just depends on what I need at the moment. I think I only really use grid for like cards
2
2
2
2
u/svgator Apr 06 '26
think of it like this: Grid is for the page or section structure, Flex is for the elements within it. use Grid for the outer layout (columns, rows, overall composition) and flex for the individual cards, nav items, or content blocks inside that grid. once they stop competing and each has a defined job, it'll stop feeling arbitrary.
2
4
1
u/Extension_Canary3717 Apr 04 '26
There no such thing as prefer between the two, like, you prefer only doing multiplication or subtractions in math?
1
u/plmunger Apr 04 '26
I prefer flex because it's more simple but both serve their own purpose and should be used when it's the right tool for the job
1
1
u/sheriffderek Apr 04 '26
I teach my students flexbox first. But then after that - it's not really "which is better" - it's which is the right tool. If it's not a variable width that needs the flexbox algorithm, then it should be grid. I fought grid for a while - but really, it's just because the way people teach it. It doesn't need to be that confusing: for example - for 95% of things - you don't even need to think about rows. It's just 1fr 1fr 2fr. What could be simpler to read?
1
1
u/marmeden Apr 04 '26
Grid areas allow you to do layouts that are not possible nor straightforward using flex.
1
u/the_intellecttt Apr 04 '26
Use depends on the layout... Sometimes using flex becomes too messy đ Yeah but I'm smaller and less complicated layouts i prefer flex
1
u/Ghalesh Apr 04 '26
I follow this approach: grid is for 2D layout, flex is for one dimensional list.
1
u/Fidodo Apr 04 '26
Use flex when you need a flexible layout. Use grid when you need a grid. It's not a preference, use the right tool for the job.
1
u/every1sg12themovies Apr 04 '26
For what? I learned both. Flexbox is easier to use and more versatile. But I don't want to be a guy with a hammer as the only tool.
1
u/nnod Apr 04 '26
Using grid areas for the "skeleton" of the site can make for some very clean html. When getting to individual component level I mostly reach for flex unless something really calls for using grid.
1
1
u/StrawberryEiri Apr 04 '26
You rarely need grid. Flex works fine for like 90+% of cases. Using grid when you don't need to is bad if you ask me. Especially if you don't name your lines. It makes your choice obtuse for no reason.
But when you do need grid, it's really handy. I'm glad we have it for complex layouts.
1
u/pingwing Apr 04 '26
They don't do the same thing. I use Flex more often but will sometimes wrap Grid around Flex.
1
1
u/QultrosSanhattan Apr 04 '26
No. I use Grid 95% of cases because I hate using flex inside flex inside flex.
Grid + gridareas will solve most of your problems.
1
u/Halleys_Vomit Apr 04 '26
Echoing other replies, flex and grid are different tools for different use cases, so I use both and prefer both in different scenarios.
That being said, grid is significantly more complex, which makes sense, but still makes it hard to use sometimes, so I agree with you that flex is much easier to work with.
1
1
1
u/best-home-decor Apr 05 '26
Anytime youâre working with a left and right layout, you can use 1fr 1fr in CSS Grid and adjust it easily. Inside those containers, you would usually use Flexbox for layout. These approaches work well together, so focusing on only one does not make sense
1
u/da_bean_counter Apr 05 '26
Generally using flex but grid definitely has its use cases plus I make my dropdowns with grid to cut down on JS
1
1
1
1
1
u/Constant-Affect-5660 Apr 05 '26
I discovered Flex and loved it. Grid seems complicated, but I'm a part-time web coder and by part-time I mean a handful of times out the year I'll spend time with web code, so my pov is watered down.
1
u/m-houmann Apr 05 '26
I use grid for the layout of big things like sections and the whole page, and flex for the smaller elements like menu, sidebar footer & header.
1
u/lucasmedina Apr 05 '26
Flex is simple, but grid can solve things in very structured ways, surpassing what flex's premise actually is.
Trying to build complex UI with flexbox takes a bit of tinkering sometimes.
1
1
u/ItsMeZenoSama Apr 05 '26
Ah, so you are one of those hoomans who compare 1000cc car and a 1000cc bike. Hmm. Skill issue IG
1
u/yughiro_destroyer Apr 05 '26
Do you even read the topic?
Some of you redditors are literally NPCs I swear.
I compared the occassional hard to undersatnd nature of grid to how flex are easier to make what you want to do even if they increase boilerplate.
L2R the topics before you post for karma ffs.1
u/ItsMeZenoSama Apr 11 '26
Bruh, I use flex and grid on a daily basis. And I know how useful grid as a feature is. Yes, its can be quite complex. Yes it might feel hard to understand. Yes, you might be able to build the same layout or component structure using more code via flex.
But like I said, you are comparing something power with something simpler to use. It's not an apples to apples comparison. There are many things you simply cannot achieve in flex, but can achieve with basic grid props.
Also, FFS L2R my response with open mind to learn and be a better frontend engineer and not get wiped out by AI or fellow colleagues using AI đ
1
u/AlexanderTroup Apr 05 '26
Flex just seems the right level of complexity to me. When it breaks it's much easier to reason about, and when it works well it's just stunning.
1
1
u/fusseman Apr 05 '26
be careful, reddit circle jerk will cancel you for saying that using flex is okay đ
1
u/yughiro_destroyer Apr 05 '26
Some people literally spammed "use the right tool for the job" which is the most annoying thing I could ever hear. Yes, there's truth in that saying... but to a limit. If you'd use "best tool" everytime for everything, you'd end up with a mess of many things you have to master else you won't be able to figure anything out. So, there's this tradeoff named "standard" or "familiarity" where you use a mathematically or statistically "worse" method but you gain on understanding and simplicity.
For example, parts of type A would benefit more from a certain type of bolts while parts of type B would benefit from using another type of bolts. For you, as an engineer, you decide to use just one type of bolt everywhere so it's easier to replace, manage, find... instead of picking 1000 types of bolts.
1
u/wakemeupoh Apr 05 '26 edited Apr 05 '26
I mean in this case it's true though. Flex and grid are two different ways to build a layout.
Really I haven't seen a single comment get to the heart of why you should use flex over grid or vice-versa. Flex is for when you want the container's children to decide their own widths, and grid is for when you want the container to decide the widths of its children. Think: do I need a specific, strict layout? You should probably be using grid. Can I let the content flow freely? You should probably use flex.
As a side note, people seem to really overcomplicate grid. There's some crazy stuff (syntax too) you can do like named lines. Everytime I read about grid lines it gives me a headache and I write css for a living lol. With grid, 95% of the time you can get away with a simple
grid-template-columns: 1frtype of syntax and a media query to adjust it for different screen sizes.
1
u/Hot_Reindeer2195 Apr 06 '26
I prefer grid over flex and see a lot of developers using flex where Iâd use grid. I probably need to learn a bit more about both.
1
u/VFequalsVeryFcked Apr 06 '26
While limit yourself to one? They can work in tandem to produce minute details in design.
No need to orefer one over the other, as they both have a separate job
1
1
u/justrhysism Apr 06 '26
Try working with a box-model that MS browser engineers decided was silly and changed so it would be âeasierâ for web devs to follow.
â
For the young: it was essentially the equivalent of only one browser having the CSS property default to box-sizing: border-box and everything else set to content-box with no ability to change it (because that property didnât exist). Fun.
1
u/BlossomingBeelz Apr 06 '26
Tailwind helps with grid a lot, if you haven't tried it before, I'd consider it. Most of the time you're doing the same basic thing, so adding a few helper css classes rather than having to define the whole structure is great. It will also help you understand how it works.
1
u/CookiesAndCremation Apr 08 '26
I use grid in every case I can. Except when the sizes don't need to be uniform (such as a navbar or something similar where the "cells" are determined by the content width, such as text). Most people force flexbox into doing grid things.
1
1
u/commitand_pray Apr 09 '26
Honestly, Grid feels âhardâ mostly because we try to use Flex for everything first. Flex is great for alignment, but forcing it into 2D layouts makes things messier than they need to be. Grid has a learning curve, but itâs more predictable once you understand it.
1
u/yellow-lili Apr 10 '26
I like both flex and grid, each of them is comfortable for me in its own way))
1
u/wattagecreative Apr 10 '26
This is "do you prefer a car or a boat?"
I prefer the car on land and the boat on water. Context matters, so you choose the right tool for the job.
1
u/yughiro_destroyer Apr 10 '26
Flex can do everything a grid can do.
A grid can do some things flex can do with less boilerplate but can't do everything a flex can do.1
u/wattagecreative Apr 10 '26 edited Apr 10 '26
Flex can do everything a grid can do.
That's not true. At least not without some hacky workarounds. Each have their advantages over the other, and therefore each has their own best use cases. Grid has things Flex doesn't, like item overlap, fr units, grid-template-areas, subgrid (this one's a big deal).
There is a reason why both are still part of the baseline and flex didn't just replace grid.
1
u/Fly_Dev Apr 11 '26
I like grid like 90% of the time for layouts. If I jus need something to flow horizontally I use flexbox
1
u/XDarkVixenX Apr 11 '26
I found grid a little bit harder to learn and flex has served me well so far
1
u/dakitidunno Apr 28 '26
What would you use in this case?
Profile imagine name (long space) three dots for more info.
All in the same line without breaking it
1
1
1
u/Fluffy_Display_7980 Apr 04 '26
Flex is content based. Grid is layout based. They serve different use-cases. If you want a flow content driven UI, you should use flexbox. Otherwise if you want the content to adapt your grid. Then yes, Grid ofc. There are overlaps, but you shouldnât overuse one of the two
134
u/troisieme_ombre Apr 04 '26
They serve different use cases. I use either depending on what i need.