It's extremely disappointing that, other than Firefox, browsers have refused to implement subgrid[1]. As I understand it, this feature was deferred from the basic grid spec with the understanding that it was still necessary and would be implemented, not so it could consequently be ignored. If Mozilla was capable of implementing subgrid, Apple and Google certainly have the capacity to do so.
> It's extremely disappointing that, other than Firefox, browsers have refused to implement subgrid
The way I understand the situation in Chromium is that they are slowly moving to a new layout system called LayoutNG [0]. The current grid implementation is in the old layout system however and they don't want to spend time extending it just to abandon it a few months later. There's already an ongoing work to support grid (GridNG) in LayoutNG [1] and once that's done, adding support for subgrid should be "fairly straight forward" [2].
There are some things that grids aren't optimized for, one example that comes to mind is `justify/space-between` where you don't really need to think about the layout (by adjusting cols spans).
But yeah, for structural layouts grids are better.
Laying out a set of tabs would be 1D (either horizontal or vertical). Laying out an page with headers, footers, and sidebars would be 2D (vertical and horizontal).
You don't _need_ grid, but it does make it simpler. You technically don't need flexbox either.
In grid you can define this layout in a single construct. Whereas with flexbox, you're defining several nested flex elements to get there.
You can think about the entire layout as a unit, rather than the horizontal parts first (sidebar/main content) then the vertical (header/footer) or vise versa.
Honest question, because I started with HTML when tables were still the rage for defining layouts and I pretty much stopped working on new sites shortly before Flexbox became a thing: Do people actually think that Flexbox is a nice API, or is it more like "well, at least it's better than using tables or float/clear hacks"? I know tables shouldn't be used for things that are not actually tabular data, but I have to say that just looking at them in the raw HTML document, they make it obvious how the page is going to be presented in the end. With Flexbox, you have an undefined maze of divs which are then magically styled by an external stylesheet. I recently tried using this approach for something that would probably have been solved with an image map 20 years ago, and it was awkward to work with. I see Flexbox can have an advantage when using the same markup for e.g. mobile and desktop layout, but just looking at the raw HTML always leaves me a bit confused how elements on the page will relate to each other.
Flexbox has been useful, but for me has essentially been superseded by css grid, pretty much for the reasons you mention. I find flexbox to be difficult to use and feels more like a stopgap feature on the way to full blown grids than anything long lasting. I wish subgrids would become standard, but regardless we're in a much better place these days vis-à-vis css layouts than we were pre-grid.
> just looking at them in the raw HTML document, they make it obvious how the page is going to be presented in the end
I guess you can say the same thing about the infamous <FONT> tag. But if you want styling information directly in the HTML, you can still do it with the "style"-attribute, using marginally more syntax. e.g. <div style="display:table"> or <div style="display:flex; flex-direction:row"> instead of table <table> where html table semantics are not appropriate.
I do find flexbox a much nicer model than tables, but I guess that comes down to taste. A flex is basically like a table with either a single column or a single row, and a bit more fine-grained control.
the style attribute is problematic with strong content security policies disallowing unsafe-inline styles [1]. This can be worked around using classes though.
I find the flexbox syntax terrible and confusing, and the fact that they created a bunch of shortcuts that encompass several properties at once makes things even worse. Every time I want to use flexbox, I have to refer to the documentation. The result is that I use flexbox once for the main layout, and then tend to use other mechanisms in order to position small elements, menu items etc. even though flexbox would do the job perfectly.
I wish it was intuitive to me, so I could use it quickly and without turning my css code into a mess.
Try Bootstrap 4's "grid only" CSS file. I used to do Flexbox by hand, until I realized I was reinventing the Bootstrap wheel by abstracting most of it into classes.
It's all based on rows and columns, that collapse based on screen width. Plus, utility classes for all the alignment positions.
You'll still run into the issue of way too many nested div's, but I find myself more productive than trying to flexbox everything by hand. ymmv.
Flexbox has its place in one's toolkit, but I still prefer floats in many situations. It might be subjective, but floats often seem to result in cleaner CSS, even taking into account the clearfix hack (which becomes much simpler with a Sass mixin).
Suppose you have the following desktop layout:
ONE TWO THREE FOUR FIVE
and you want to turn it into the following mobile layout:
O N E
TWO THREE
FOUR FIVE
With floats, you can achieve that by overriding only a few properties, primarily 'width'. But if you asked me to do it with either flexbox or grid, I'd have to think for a bit.
Flexbox is good for things that need internal flexibility in one dimension. Grid is for things that have a relatively static, two-dimensional layout. Floats are perfect for things that need to shuffle across dimensions, and I don't see any reason to avoid using them. After all, it's not as if floats are un-semantic or anything.
In your example, how are floats any different than a flex container with wrapping enabled? The wrapping is still dependent on the width of the children, just like your floating elements.
I think it is a common misconception that grid based layouts are static. Some combination of repeat, auto-* and minmax() can give very flexible layouts without even needing CSS media queries.
I think that that is part of the point with "modern" (however you want to call it) HTML: it should be declarative and layout-agnostic, and let the CSS do its thing regarding the various ways it should be displayed; this way the HTML is the same regardless of the actual layout of the page. Or at least it should be, in principle.
Just a reminder: csszengarden.com was created back in 2004 (I think). Zeldman's "Designing with Web Standards" came out in 2003. "Modern CSS" is over 17 years old. The CSS itself is not yet 24 years old.
I need to apply justify|align|content|items in the browser to make it do what I want. I can't for the life of me remember what they do.
But the underlying principles are neat. Flexbox gives me a container and an arbitrary number of children of various types which I can then position to my hearts delight. And things tend to fall in to place without me over-specifying every case.
As long as I'm working along one dimension, that is.
> but just looking at the raw HTML always leaves me a bit confused how elements on the page will relate to each other.
You say it like it's a bad thing. Chances are the relations are flexible.
One does run in to issues when the Flexbox rules apply across the bounds of components (e.g. Vue or React components) which makes composition difficult. Can be avoided by clearly separating layout from the rest. The S in SOLID applies to CSS as well.
I started at the same time as you. I can’t say it’s a nice API nor can you eyeball the document and understand its layout, but it’s better than the horror shows of centering things of old. Things like flexbox froggy allow it to become fairly intuitive.
Css specification does not do nice API. It does unintuive, convoluted and full of special cases. Flexbox is much better and easier then without flexbox.
Casual reminder that if you intend to support IE11(say for business use), Grid is completely unsupported.
Flex isn’t too bad and honestly really unlocks awesome abilities after you get used to it. Once you know flex, you can do the infamous “how to vertically center anything” move pretty easy.
Also, using order with flex is awesome. If you are using Bootstrap 4+ you can very easily use most flex properties responsively to do some crazy transforming layouts as well.
IE11 gets enough of grid support that it won't look absolutely terrible in most cases. Sufficient to get users by and maybe tell them to switch to a proper browser (ie, Firefox which has subgrid too)
A lot of people are posting their favorite links to flexbox and grid resources in this thread, so I'll post mine: two educational games designed to teach Flexbox and Grid.
I was following along but after the first few code snippets it it says:
> You can see how nicely the div elements position itself horizontally. But if you notice, it doesn’t entirely take up all the space within the container. There’s a gap at the end.
There's no example outputs or screen shots or preview panes or anything so no, I don't "see".
I guess I'm supposed to be copying this code by hand into a CodePen or a sample HTML page but that wasn't made clear at the beginning. I started reading expecting an article explaining something but it turns out that it's a half-tutorial.
Luckily, people have posted a bunch of great links in these comment so I'm going to go and read those instead.
The thing that's a tiebreaker for me is grid-gap (and recently, its shorthand gap). Uncountable hours have been wasted making two elements separate from each other for a few pixels. Still today, the techniques used by Bootstrap are still used, altough a bit less hacky with calc(), but still we're relying a lot on negative margins.
With gap, making a gutter is trivial. And while gap _can_ be used with flexbox, the thing is that it's not supported by Safari[1], and who knows when it will be implemented.
CSS Grid is nicer for large layouts, and it’s nice to change one piece of text and change your layout, especially if you’re living in your CSS file only. And from time to time I’ve relearnt it and got excited about it. But it’s unwieldily; the shorthand syntax is nice but it still feels unpleasant when I’m still editing the HTML - when I’m quickly laying out things I still revert to putting flexbox rules in DOM elements for development speed.
The best tutorials I've seen for both Flexbox and Grid are from Kyle at Webdev Simplified. Seriously check out this dude's channel. He explains everything perfectly.
Yes, it's almost like a standard, but it is optional. Some people like 16 columns. I personally use 12 but have used 16 in a project that required smaller segments.
This comes from paper design, as usual, and I don't think 12 was the number. It's just a number that makes sense for desktop screens (where it began).
Both CSS Grid and Flexbox are powerful in their ways. Before deciding which to choose, understand the complexity, the structure and the content of the site you are to build.
> A good layout makes users stay on a site because it makes important stuff easily accessible and intuitive to find. A lousy layout frustrates users, who leave because they can’t find what they are looking for.
On a website with 2 pop-ups going straight to your face when you open it (and the cookie-related one isn't even GDPR compliant) >_<.
[1] https://caniuse.com/?search=subgrid