29 ms·
Flexbox and Grids: your layout’s best friends
- andrewfromx 9y agothis is great info, https://gridbyexample.com https://gridbyexample.com is also good resource
- IgorPartola 9y agoIs it now possible to do a responsive CSS-only layout a la Masonry/Pinterest, with the correct order of elements using this?: [1] [2] [3] [4] [5] [6]
- sorrymate 9y agoI too would like to know! I have yet to find a way display flex rows that are different heights and that align left to right. It seems the only options are to align by column, or use Masonry.js which seems like overkill. Even Bootstrap 4 only supports column layout. Anyone been able to accomplish this with CSS-Grid or Flexbox?
- IgorPartola 9y agoFrom what I can tell, it hasn't been done with Flexbox alone. To get the order right, you have to specify a fixed height for each element, making it non-responsive at best. I am wondering if grid somehow helps. There is also of course the order property, which with some cleverness can re-order elements from 1, 2, 3, 4, 5, 6 to 1, 4, 2, 5, 3, 6. You'd have to get awful clever with it though to figure out how to do this right, so still might rely on JS.
- akrigline 9y agoSort of https://codepen.io/akrigline/pen/qVaWQo https://codepen.io/akrigline/pen/qVaWQo You can't simulate the way items can extend into other rows easily with CSS Grids, but the default behavior for children of a display:grid element is to flow horizontally into cells until they have to start wrapping.
- gsnedders 9y agoNo, you can't, because the position of each item depends on all the previous items. Flexbox only deals with a single row at a time, whereas masonry doesn't really have a notion of a row (given the 4th item in each column can be at very different places, depending on the sizes of the items above). Grid requires you to bind things to an actual grid, so you still can't do masonry (for similar reasons). The closest you can do is using multicol, but that's then top-to-bottom then left-to-right instead of left-to-right then top-to-bottom. Note that this is mostly thinking about unequal height items (which is the common case of masonry); equal height you can do with floats yet alone more recent layout modes.
- IgorPartola 9y agoThanks for the rundown. That’s unfortunate. This might be another case where browsers will eventually implement yet another layout method (how many are we up to now with floats, tables, columns, flex box, grid?) as soon as these layouts are replaced by something new.
- gsnedders 9y agoMasonry is something somewhat fundamentally unique given it relies on how things flow across both dimensions in a specific way; there's been some vague talk about extending Grid to support it (but nobody's actively working on things like that for now, even subgrids have gone a bit quiet), but probably more practically we'll stick to doing complex layout modes with a limited scope in JS (and hopefully soonish with Houdini and avoid much of the costs associated with current ways of doing layout in JS), given solving things like Masonry in a general way is hard (and relatively unclear that the gain is much for the amount of work involved). As for number of layout modes, it depends on how you count. Roughly: block, inline, table, positioned, flexbox, and grid. Multicol doesn't actually introduce a new layout mode, it just functions in a similar way to fragmentation when doing layout for printed media, just fragmenting across columns instead of across pages.
- couchand 9y agoWhat's the correct order of elements?
- IgorPartola 9y agoThe second element should be to the right of the first, not below it.
- couchand 9y agoWhat about the rest? Does it matter how tall the elements are? My point is just that, as described, your problem is woefully underspecified.
- mmanfrin 9y agoIsn't that just a wrap? flex-wrap: wrap;
- deno 9y agoNo, wrap will position (flex-start, center, flex-end, and reverse) in the next row, it won’t fill any gaps from the neighboring rows.
- dbbk 9y agoI had to implement a masonry layout recently. The answer is no, however it is actively being explored at the W3C - https://github.com/w3c/csswg-drafts/issues/945 https://github.com/w3c/csswg-drafts/issues/945
- 28inch 9y agoI did this a couple of months ago: https://codepen.io/balazs_sziklai/pen/mOwoLg https://codepen.io/balazs_sziklai/pen/mOwoLg
- dehef 9y agoWhen using conditionnal arrival of dom object (I mean like using ngIf in Angular or simply using switching display none/block on some block) flexbox layout seem very difficult to anticipate. For that kind of things I still prefer using inline-block, that is more predictable. A tip: Strangely Safari tend to need flex-basis value everywhere
- gsnedders 9y ago> A tip: Strangely Safari tend to need flex-basis value everywhere Most of the Safari issues should have been fixed in Safari 11, FYI. (The implementation of flexbox was largely copied over from Blink.)
- JepZ 9y agoI agree that flexbox and grids complement each other, but I doubt that grids are ready for product. I mean it is nice that all major browsers have a decent support in the newest versions, but production ready includes for me that older browsers (without support or major bugs) are not common anymore (~ <5%). As far as I can see it it is currently scored at ~75%: https://caniuse.com/#search=grid https://caniuse.com/#search=grid
- onion2k 9y agoYou don't have to make pages that look identical in every browser. Make something that works for everyone and then use newer browser features to make it as good an experience as possible depending what features are available. CSS even has the "@supports" feature for doing it - https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
- cvsh 9y agoThe problem is that grid is best used for overall page layout... which is part of your CSS least amenable to progressive enhancement.
- c-smile 9y agoIf to speak about layout methods @supports will not help you but will force you to do the job twice. If you can do your layout without flex boxes why do you need to create second version with them at all?
- amatecha 9y agoBe careful using CSS Grid - IE11 supports only an old version[0] of the spec, and thus is missing many major CSS Grid features like repeat(), grid-gap and span. [0] https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
- amatecha 9y agoThese "Grid by Example" videos by Rachel Andrew are an excellent intro to CSS Grid: https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dF... Highly recommended for anyone who's not familiar and wants a quick introduction -- each video is just a few minutes long. :)
- fauigerzigerk 9y ago>If you wish to fully support all browsers (yay!) then I’d highly recommend using feature queries to provide an alternative layout for browsers that don’t support Grids or have an older syntax. How does that not translate into "Just do all your work twice!"?
- RobertoGonzalez 9y agoSince CSS grids are mostly used for the global page layout, the ideal use case is using it to design complex pages that would be very annoying to make with other techniques, and on older browsers fall back to a much simpler design with flexbox or floats. Since those fallbacks only require a handful of lines of CSS, it only takes a few minutes to get the compatibility to almost-perfect, and you can get a better design in front of most of your users very quickly. To me at least it's a solid mix of design freedom and development speed.
- fauigerzigerk 9y agoIf you have a good reason for complex pages your solution is only viable once the share of old browsers has dropped below, say, 5% to 10%, depending on your niche. What's actually going to happen is that most people will layer JavaScript frameworks on top of HTML and then we're going to complain about the huge performance and memory overhead of JavaScript heavy websites.
- smash33 9y agoEvery page doesnt have to look the same in each browser.
- it_learnses 9y agowill bootstrap 4 leverage Grids?
- yardshop 9y agoSure, grid and flexbox are cool, but when is the CSS Cute Cartoon Faces spec coming out!?!?
- kccqzy 9y agoHere’s a point that might be slightly controversial. The main evangelists behind CSS Grid are women not men, and they took advantage of this to push political agenda about empowering women/women in tech. I feel very conflicted about this. On one hand I support more females in this arena and having conversations about women in tech can certainly help, not to mention the women involved here have done an excellent job and deserve recognition. On the other hand I also feel that I want this to be a purely technical discussion without going into politics and political correctness at all. When I’m concentrating on a tech problem I’m not necessarily in the mood for social commentary. Your thoughts?
- indubitably 9y agoThe standard is excellent, and has been rolled out much more effectively than previous standards (much more smoothly than flexbox, to cite a recent example). The women involved in this project kicked ass, and continue to do so. What's to feel conflicted about?
- kumarvvr 9y agoRecently used CSS Grids for layout control and Bootstrap v4 for element styling. Grids are insanely easy to use and do a really good job of separating content and presentation. And I used flex boxes within grids to fine tune layout and it's really awesome and simple. Verbose, but simpler than using frameworks like BS, Semantic or Materialize for layouts.
- fro0116 9y agoIs anyone aware of any attempts/plans to bring CSS-grid style layout to React Native? Either officially or through some library/plugin. I'd love to try out Grid on the Web side of my app, but it's hard to justify if it'd mean I have to maintain a separate Flexbox-based layout for the React Native side anyways.
- sAbakumoff 9y agothis thing does not open in safari.
- neomaxzero 9y agoGroxa Eva!
- neomaxzero 9y agoGroxa Eva.
- lucaspottersky 9y agoi've just fell in love with Grid's pragmatic approach! even if it doesn't cover specific edge cases, its simplicity pays off.
- protodaniel 9y agoIf you enjoyed this article you may find this one interesting too: https://tech.nine.com.au/2017/10/25/14/16/unlocking-the-power-of-css-grid https://tech.nine.com.au/2017/10/25/14/16/unlocking-the-powe... It's centered on grids but it has 15th Century analogies. ;)
- purple-dragon 9y agoI was able to finally start using grid in production for a new project a couple of weeks ago. It made page layout a breeze and my html and scss are so much tidier and easier to read. Flexbox still has its place as the article points out, but abusing it to do 2-dimensional layout didn't feel any better than doing the same with older techniques.
- irrational 9y agoMy understanding is Grid is designed for whole page layout, while Flexbox is designed for sub-page or component layout.
- purple-dragon 9y agoYes, but before grid was available people did some funky things to build responsive grids (like using a flexbox column containing flexbox rows or using a lot of repetitive media queries).
- lostapathy 9y agoYeah - they do solve different problems. We recently switched our production app to using both (from strictly bourbon/neat grids) and it's made life so much simplier.
- chrisweekly 9y agoFantastic piece. Clarity, breadth, depth, working examples... this is what “howto”-style, practical posts should look like.
- CamperBob2 9y agoI agree, it's a nice piece of work. It makes a better flexbox tutorial than most flexbox tutorials.
- wolco 9y agoI had the chance to see Rachel Andrew speak at laracon. Great presentation and got me excited about flexbox and grid. I'm still wondering is the browser support wide enough to implement this in production for the average site?
- irrational 9y agoIt all depends on if you have to support IE or not: https://caniuse.com/#search=grid https://caniuse.com/#search=grid https://caniuse.com/#search=flexbox https://caniuse.com/#search=flexbox
- wolco 9y agoHas everyone decided to drop ie? For tech related sites that might make sense but I think not supporting ie means turning off support to the users who are older in some cases but more likely to buy. Where are people drawing the line? Bootstrap 3 still supports legacy browsers but version 4 and other popular frameworks like bulma use flexbox.
- irrational 9y agoEvery website is different. I work for a Fortune 150 company, but the site I work on is so narrow in focus that we have the luxury of deciding that the amount of people using IE/Edge (very very few based on our server stats) is not worth the development/QA efforts to support them. This is especially nice since none of us have a Windows machine at work or at home ;-)
- Silhouette 9y agoHas everyone decided to drop ie? Maybe some consumer sites aimed at smartphone-wielding younger audiences can now get away with dropping IE completely. Maybe some sites aimed at very small businesses too. If you're aiming at older individuals or at medium to large organisations, not a chance.
- notahacker 9y agoWith only 70% browser support, you're going to have to have a pretty strong reason to believe your audience is different (or not to care) to justify using Grids
- crush-n-spread 9y agoMost everything with CSS Grid is broken on Edge 15, which is what most Edge users are running. Thus Grid is not something you should be putting in production. https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid
- ch4s3 9y agoYou're making the error of assuming that all web applications in production have the same user base and constraints as yours. For example, I work on an application that is a companion app to some larger domain applications that themselves only work on newer versions of Chrome and Firefox. I defacto don't have to support IE, as none of my users can use it. Additionally if you make a developer focused tool like bug reporting, APM, or log aggregation, you can probably ignore IE, if you don't target Windows devs.
- irrational 9y agoUnless, of course, your production site purposefully does not support Edge (or IE) as a matter of policy. Fortunately that applies to me.
- lostapathy 9y agoI've run it in production, with the ms-prefixed workarounds. It actually wasn't too bad to get that going, but I look forward to not needing that.
- michaelmrose 9y agoThe same site says virtually nobody, aprox 2-3% is using edge. You either have to go all the way back to supporting IE11 and ignore everything not supported by 2013 microsoft to capture another shrinking single digit percentage of possible users until they progressively die of old age or ignore Microsoft stuff. Alternatively start providing a slightly degraded interface with fewer features and a banner. Our website works best with a modern browser with links to up to date edge, firefox, and chrome at top of page. Preferably with a notice regarding dropping support for internet exploder sometime next year.
- 9y ago
- jbob2000 9y ago> If you wish to fully support all browsers (yay!) then I’d highly recommend using feature queries to provide an alternative layout for browsers that don’t support Grids or have an older syntax. So basically, write two versions of your layout: the old way, and the new way. Flexbox and grids aren't ready for production yet.
- Waterluvian 9y agoWell, it depends on context. More and more, web tools are being used in a way where you can control what browser they're running in. Not just Electron, but also when making UIs for things like industrial tools, where you control not just the browser, but the hardware it runs on.
- alxmdev 9y ago> Not just Electron, but also when making UIs for things like industrial tools, where you control not just the browser, but the hardware it runs on. Wow, is that becoming common these days, using web browser engines to run UIs on specialized devices? Sounds a little off in the context of industrial tools, where I'm thinking embedded systems and relatively low-performance SOCs.
- Waterluvian 9y agoSorry. I realise that I combined words that will sound frightening to some. I mean non safety critical systems in an industrial environment. For example, mobile robot health and KPI monitoring.
- SippinLean 9y agoFlexbox, especially with Autoprefixer, is pretty safe to use in production. Grid support is much spottier, but can be safely used in production depending upon your supported browsers.
- c-smile 9y ago"flexbox horrors": "flex-basis" - defines mysterious "main width" (WTF is wrong with just width?) "flex-grow" and "flex-shrink" - grow and shrink relative to what? How to define flexible margins? Like I want left margin to be twice larger than right one and all this to be flexible: |---m:2*-------|--1*---|--m:1*-| ? Effectively flexbox breaks CSS box model that postulates only width/height to define box dimensions. Why I cannot say just this: { width: 1fr; margin-left: 2fr; margin-right: 1fr; } ? Where 'fr' are flex units introduced in CSS Grid https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value Why two specifications define the same entity (flex weight) by two different mechanisms - by property and by unit? CSS looks like Christmas tree where each passer-by (Google and Microsoft here) adds its own shiny stuff ... Is this what we name as modularity of CSS?
- sillysaurus3 9y agoJust use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/ https://bulma.io/documentation/columns/sizes/ Your example can be accomplished like this: <div class="columns"> <div class="column is-half">m:2*</div> <div class="column">1*</div> <div class="column">m:*1</div> </div> There's a good reason to limit yourself to 12 columns: the layout is consistent across all common screen sizes, whether it's tiny mobile screens or huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that automatic layout functionality.
- c-smile 9y agoBulma, as any other grid systems based on % units, is quite limited in real life. Check this: https://sciter.com/images/wt-langs.png https://sciter.com/images/wt-langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer. This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm
- sillysaurus3 9y ago
- chobo2 9y agoThe article does not really say what to use if something does not support grids? should your fallback be flex box? Also IE 11 does not support the @support.
- HaoZeke 9y agoMy personal favorite is lazy loading a traditional grid system with Javascript if there's no css grid support...
- joshribakoff 9y agoA common technique is fallback to mobile first layout
- boubiyeah 9y agoSome quick rants. CSS is almost as bad as PHP when it comes to naming. Most flex related properties are prefixed with flex-; but some aren't (align-items, etc) so you now have tons of non prefixed properties that actually only work within a very specific context (vertical-align, etc) and there are no compilers to tell you which combinations don't make sense or whether you have redundant properties. IE11 has tons of bugs with flexbox; I had to remove a flexbox layout earlier because of that crappy browser (it ignores explicit/inline width/height set on flex children). Otherwise it's a great tool if used sparingly (heavily nested flexbox elements with lots of special properties start to become a bit hard to follow)
- soperj 9y agoFor me the worst bugs have been in Safari by far.
- pfooti 9y agoI just assumed the naming thing was for properties shared between grid and flexbox (such as align-items). It is still pretty frustrating to remember that kind of stuff though.
- andrei_says_ 9y agoHaving a significant amount of visitors using ie10 & ie11 rules flexbox out for me. So I use Susy grid system (2) and absolutely love it.
- 28inch 9y agoI`m using flexbox heavily on 10mill+ pw site for 2 years now. we had a lot of issues at first but after learning the quirks those faded out. nothing came up in the last 6 months.
- andrei_says_ 9y agoI’d be curious to see what issues did you deal with and the workarounds which solved them. Is thawed any way you could share?