3 ms·
I've come to prefer flexbox over grid, the main reason being that it gives much more sensible behavior on different screensizes. When you want to lay out for di
by kerkeslager 7y ago
I've come to prefer flexbox over grid, the main reason being that it gives much more sensible behavior on different screensizes. When you want to lay out for different sizes of screens, grid usually means a completely separate layout inside a media section, while flexbox's wrapping behavior seems to smoothly transition between wide and narrow screens with only a few margin/width adjustments. There may be a sane way to get the same behavior with grid auto-flow, but if there is, I haven't figured it out.
One thing I'd like to try, but have never had the budget for, is completely isolated grid layouts for different sizes. That is, all the layout is in mutually-exclusive media sections. This has a higher up-front cost, but I suspect in the long run, the higher up-front cost would be outweighed by having layouts more fine-tuned for the screen sizes, and more decoupled so you don't have to worry about changes in desktop-size layouts affecting mobile-size layouts.
Flexbox also has a significantly larger browser share than Grid on CanIUse.
Really though, I'm greatly relieved to see browsers start implementing some layout tools that corresponds to how people actually think about layouts. The float years were dark times.
- Vanderson 7y agoGrid and flexbox have different uses and values. I wouldn't give up on grid. There are things it does that Flexbox fails spectacularly at. (absolute layout control for one...) But also flexbox does a few things grid simply cannot. So it's good to know both.
- The_rationalist 7y agoSadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.
- miiiiiike 7y agoThey have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.
- karlshea 7y agoThis is a very good rule of thumb. Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers. Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.
- The_rationalist 7y agoI agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.
- miiiiiike 7y agoIt's nice to be in a place with CSS where we're talking about all of the good ways to do things rather than telling each other "if you abuse this feature you can accomplish the task in 2 of the major browsers. YMMV."
- baddox 7y agoThat's an okay rule of thumb, but I find myself using grid more and more for traditional flexbox applications like a horizontal list of cards that wraps. Little things like grid-gap (flex child margins are a constant source of pain) and auto-fill with minmax [0] make a big difference to me in rapid prototyping. [0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
- Vanderson 7y agoFirefox supports grid-gap for flex, but I no other browsers do yet. https://caniuse.com/#search=gap https://caniuse.com/#search=gap
- galaxyLogic 7y agoIt would be nice to find a document showing how to do some examples in both Grid and Flex and compare the amount of markup needed, also pros and cons of each for each example
- bobthepanda 7y agoFlexbox is great if you don’t have wildly different layouts across different screen sizes. If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.
- kerkeslager 7y ago> If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways. Ehhh, not really. A common case is items laid out as boxes. On desktop I want them in rows of 3 to 5 (perhaps more on wider screens, but often this starts to look stupid beyond 4 or 5 so you set a max width for the container). And in mobile we want 1 item per row. With flexbox, you just change the width of the items from 33.33% to 100% in the media query, maybe with some adjustments to margins, and you're golden.
- shawnz 7y agoNow consider the same setup, but let's say you wanted all the boxes to be the same height: that would only be possible with grid, or by setting the heights manually
- dariusj18 7y agoFlexbox is a pain to do gutters
- jassmith87 7y agoI have been in desktop and mobile dev my entire career. Starting doing web dev 12 months ago for a new job. Never once have I thought to myself "I should figure out what float does". Grid + Flex + Block + Absolute covers all layout needs. It's funny to me because conceptually these ideas have been around on desktop/mobile layout systems forever. That they are only now making it to the web is insane.
- Scarbutt 7y agoFloats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.
- kerkeslager 7y agoFor what? I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.
- srirachafari 7y agoFor when you move to a company where the current canIUse marketshare for grid/flexbox is no longer "adequate."
- throwaway_bad 7y agoFloats should now only be used for what it's named for, to float around other elements: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi... (shape-outside is super buggy though)
- nwienert 7y agoFor having an image where text flows around it once it finishes. It’s basically good for some text flowing stuff. Which makes sense, that’s what it was designed for originally.
- tannhaeuser 7y ago
- weo3dev 7y agoOof. You are definitely missing the entire point of CSS Grid. CSS Grid is a two dimensional layout tool. Flexbox is one. CSS Grid is for architectural layout. Flexbox is for alignment and flow layout. CSS Grid was enabled across all major platforms by October 2017. You've had two years to figure that out. You want it on IE? Then use CSS Grid's original syntax because Microsoft supported Grid first. The browsers haven't "started implementing some layout tools" --- they literally did it, en masse, in 2017. Grid was available for everyone's use by October. Do yourself a favor and work through the examples here: https://gridbyexample.com/ https://gridbyexample.com/ Do yourself another favor, and stop trying to make different layouts for all the different sizes. Or, go with insanity - your call. Grid is for responsive layout, out of the box; no negative margins, no weird padding, no inane extra workarounds just to get something to line up. Once you understand that CSS Grid is the tool we have been waiting for since the late 90s, and that it, NOT Flexbox, is the sane, maintainable, future-proof layout tool for pages, and then using Flexbox within it to adjust flow and tempo -- you will/can spend a lot more time playing with things for the sake of play, and not for the sake of debugging. Good luck.
- jsjohnst 7y agoWhile I agree with almost everything you said, did you need to be condescending while doing it?
- thedevilslawyer 7y agoThese is value to vehemence in arguments.
- jsjohnst 7y ago`s/vehemence/passion/` and I might have agreed. The words may be similar, but there is a distinct difference between them. Had OP just showed passion for the topic without being vehement, I think it might have landed a lot better.
- willio58 7y agoMy thoughts exactly. Let’s all be adults here.