This has been around now for quite a few years (it was invented by Microsoft to go with Windows 8) but it took a while for the standard to settle. I’ve been waiting for the right time to start using it. With a few fall backs for older browsers (show then the mobile view of your site) it’s ready to use.
In large part, this is the web standards community’s way of admitting that table-driven layout was way easier (which it was), without ever admitting that they were wrong to tell everyone to stop doing it. But it’s probably better to be in the CSS, so I’m fine with it. Hope it works more intuitively than ‘float: left’…
Ross Hartshorn good theory but no it isn’t. In fact it’s the very opposite of that.
Tables let you do a few things easily but then they lock your markup into a very specific order and organisation. A grid layout in contrast is completely independent of its mark up. You define the grid separately and independently and you populate the grid through a mapping process which is independent of the ordering of the elements in the HTML. This mapping is done through CSS and can change in response to screen width and every other factor you can write a CSS rule for.
That said I was talking to accessibility testers today. The new power of CSS grids will enable both significantly more accessible and vastly less accessible web sites. This flexibility is a double edged sword. The closing few minutes of the video hints at this but this needs to a significantly bigger treatment. The mapping system allows developers to completely break the natural tab order of elements (left to right top to bottom). This power should be used carefully and only sparingly.
Regardless of whether it was deliberate or accidental or well done or not, the models you had available for creating layout with CSS were place and pack and they were horribly bad choices and hard as crap to use. For 20 years. It’s like, 20 years ago I would never have thought it would take them 20 years to realise that people using tables for layout weren’t doing it because they were assholes, but because CSS layout was based on fundamentally the wrong models.
That’s because the CSS creators were unconcerned with layout. HTML was simply a format for expressing a stream of text and hyperlinks. All they were interested in was adjusting typography and colours and removing those elements from the mark-up to prevent it from becoming a device slave language like latex or postscript.
It’s just all those arseholes who wanted three column layouts for their blogs and newspapers that screwed things up. HTML as it was originally conceived wanted to be free of that.
It’s worth noting that an HTML 2 page looks sensational on a phone screen. Device independence really does work better without layout.
I think the root of the problem is that the HTML/CSS standards folks wanted the content to be independent of how you looked at it. The fundamental problem with that is, that’s not how the human brain works. The whole point of tables, and most other layout, is that the layout has meaning. Layout IS content, it is a means of expressing which content matters most, which content relates to which content and in which way, and so forth. Which columns goes where, or that they are in columns not one block, often has meaning, and it’s not meaning which can be equally well expressed as text. The whole split between HTML (content) and CSS (form) was based on a false premise, which is that the content is independent of the form. It isn’t, in many cases, and thus people were stuck using CSS to try to get their content right, because the layout conveys meaning as much as the text, in many cases.
Hence the 20 years. It’s hard to fix something if you don’t want to admit it’s a problem.
Having spent the afternoon today with accessibility experts I can tell you that they hate people abusing HTML to solve cosmetic problems. At least 15% of the internet public use the web with some kind of disability and for their sakes it is important to use HTML in its most semantic way. Layout consumes a lot of our thinking because we are very visual creatures but walk a mile in the shoes of a vision impaired or mobility disabled person and this stuff takes a distinct second place to usability. No tables can never be used for layout. These people can hardly tolerate stray divs let alone blatantly misusing markup.
Table driven layout is a particular bugbear of the good folks in the accessibility community, but it hasn’t been their real main problem in a long time. No disagreement that we need to make web pages usable for people who cannot see (well), or have motor control problems, etc. The number one obstacle for that is probably the use of flash and now javascript frameworks to make what should be web pages work as web apps instead, or for too many pieces of content to be put onto the same page such that the screen reader cannot tell easily what is the thing to read in what order. The use of images in place of text also is a major issue, but alt tags can solve that, if used appropriately. Multiple columns require indicating what order to read them in, which in principle should just require a tag on them to say what order to read in.
There is also a problem with the way we fund the development of alternative web browsers for the blind, mobility impaired, etc., but that would lead me into a much longer comment.
“Normally-sighted people get multiple competing browsers for free. The blind people, we make them pay hundreds of dollars, and keep re-buying it every few years.” It’s kind of horrifying. If Google, Facebook, Amazon, and a few other big software companies each donated a couple developers’ worth of time or money to a non-profit, they could probably save as much by not having to worry about coding for accessibility for ancient browsers. Accessibility for screen readers is always going to require extra thought, but it seems to be weirder than it has to be.
It’s too “niche”. The silicon valley giants don’t do niche. Literally millions of people are not worth their time.
Incidentally there is a public’s domain competitor called nvda which is chipping away at jaws’ dominance. It’s like the Firefox story but in slow motion. It takes so long to gain proficiency in these products (analogous to qwerty vs Dvorak) that all the infrastructure and resources are skewed towards the incumbent. It’s been like that since long before the web was born.
John Hardy Developer 
I have been asking why the fuck CSS didn’t have a grid layout engine for 20 years.
LikeLike
Just use HTML tables. They’re not just for displaying tabular data, you know.
(Just kidding).
LikeLike
This has been around now for quite a few years (it was invented by Microsoft to go with Windows 8) but it took a while for the standard to settle. I’ve been waiting for the right time to start using it. With a few fall backs for older browsers (show then the mobile view of your site) it’s ready to use.
LikeLike
As I mentioned previously before flex box and especially grid CSS had no deliberate page layout mechanism. It’s been hacks all the way back to 1999.
LikeLike
In large part, this is the web standards community’s way of admitting that table-driven layout was way easier (which it was), without ever admitting that they were wrong to tell everyone to stop doing it. But it’s probably better to be in the CSS, so I’m fine with it. Hope it works more intuitively than ‘float: left’…
LikeLike
Yay! Fractions!
LikeLike
Ross Hartshorn good theory but no it isn’t. In fact it’s the very opposite of that.
Tables let you do a few things easily but then they lock your markup into a very specific order and organisation. A grid layout in contrast is completely independent of its mark up. You define the grid separately and independently and you populate the grid through a mapping process which is independent of the ordering of the elements in the HTML. This mapping is done through CSS and can change in response to screen width and every other factor you can write a CSS rule for.
LikeLike
It’s still easier. Easier doesn’t mean better or more flexible.
LikeLike
Grids are extremely easy and vastly more useful. This mapping mechanism is what has been missing from CSS since the very beginning.
LikeLike
That said I was talking to accessibility testers today. The new power of CSS grids will enable both significantly more accessible and vastly less accessible web sites. This flexibility is a double edged sword. The closing few minutes of the video hints at this but this needs to a significantly bigger treatment. The mapping system allows developers to completely break the natural tab order of elements (left to right top to bottom). This power should be used carefully and only sparingly.
LikeLike
Regardless of whether it was deliberate or accidental or well done or not, the models you had available for creating layout with CSS were place and pack and they were horribly bad choices and hard as crap to use. For 20 years. It’s like, 20 years ago I would never have thought it would take them 20 years to realise that people using tables for layout weren’t doing it because they were assholes, but because CSS layout was based on fundamentally the wrong models.
LikeLike
That’s because the CSS creators were unconcerned with layout. HTML was simply a format for expressing a stream of text and hyperlinks. All they were interested in was adjusting typography and colours and removing those elements from the mark-up to prevent it from becoming a device slave language like latex or postscript.
It’s just all those arseholes who wanted three column layouts for their blogs and newspapers that screwed things up. HTML as it was originally conceived wanted to be free of that.
It’s worth noting that an HTML 2 page looks sensational on a phone screen. Device independence really does work better without layout.
LikeLike
Yes, but TWENTY YEARS?
LikeLike
I think the root of the problem is that the HTML/CSS standards folks wanted the content to be independent of how you looked at it. The fundamental problem with that is, that’s not how the human brain works. The whole point of tables, and most other layout, is that the layout has meaning. Layout IS content, it is a means of expressing which content matters most, which content relates to which content and in which way, and so forth. Which columns goes where, or that they are in columns not one block, often has meaning, and it’s not meaning which can be equally well expressed as text. The whole split between HTML (content) and CSS (form) was based on a false premise, which is that the content is independent of the form. It isn’t, in many cases, and thus people were stuck using CSS to try to get their content right, because the layout conveys meaning as much as the text, in many cases.
Hence the 20 years. It’s hard to fix something if you don’t want to admit it’s a problem.
LikeLike
Having spent the afternoon today with accessibility experts I can tell you that they hate people abusing HTML to solve cosmetic problems. At least 15% of the internet public use the web with some kind of disability and for their sakes it is important to use HTML in its most semantic way. Layout consumes a lot of our thinking because we are very visual creatures but walk a mile in the shoes of a vision impaired or mobility disabled person and this stuff takes a distinct second place to usability. No tables can never be used for layout. These people can hardly tolerate stray divs let alone blatantly misusing markup.
LikeLike
Table driven layout is a particular bugbear of the good folks in the accessibility community, but it hasn’t been their real main problem in a long time. No disagreement that we need to make web pages usable for people who cannot see (well), or have motor control problems, etc. The number one obstacle for that is probably the use of flash and now javascript frameworks to make what should be web pages work as web apps instead, or for too many pieces of content to be put onto the same page such that the screen reader cannot tell easily what is the thing to read in what order. The use of images in place of text also is a major issue, but alt tags can solve that, if used appropriately. Multiple columns require indicating what order to read them in, which in principle should just require a tag on them to say what order to read in.
There is also a problem with the way we fund the development of alternative web browsers for the blind, mobility impaired, etc., but that would lead me into a much longer comment.
LikeLike
Indeed screen readers are an evil world. JAWS is a horror show of monopoly greed.
LikeLike
“Normally-sighted people get multiple competing browsers for free. The blind people, we make them pay hundreds of dollars, and keep re-buying it every few years.” It’s kind of horrifying. If Google, Facebook, Amazon, and a few other big software companies each donated a couple developers’ worth of time or money to a non-profit, they could probably save as much by not having to worry about coding for accessibility for ancient browsers. Accessibility for screen readers is always going to require extra thought, but it seems to be weirder than it has to be.
LikeLike
It’s too “niche”. The silicon valley giants don’t do niche. Literally millions of people are not worth their time.
Incidentally there is a public’s domain competitor called nvda which is chipping away at jaws’ dominance. It’s like the Firefox story but in slow motion. It takes so long to gain proficiency in these products (analogous to qwerty vs Dvorak) that all the infrastructure and resources are skewed towards the incumbent. It’s been like that since long before the web was born.
LikeLike