
CSS Grid – Table layout is back. Be there and be square - ghosh
https://developers.google.com/web/updates/2017/01/css-grid
======
tannhaeuser
I don't know how to say it politely but what has been achieved by using ad-hoc
syntax such as this gem (and similar complex CSS syntax):

    
    
        display: grid;
        grid-template-rows: 150px [nav-start]
            auto 100px [nav-end];
        grid-template-columns: [header-start]
            minmax(200px, 3fr) 9fr [header-end];
    

CSS fans for some reason seem to think that its somehow better to have
rendering/presentational properties in an ad-hoc language. Originally, plain
markup attributes where designed to accomodate rendering properties, with type
checking and all. The naive dichotomy established by putting "semantics" into
markup and "presentational" properties into CSS was accidental, and it didn't
make sense back then, nor does it now.

~~~
lenkite
CSS would have been so simple if it had just adopted a plain LISP syntax. It
is so difficult to memorise all the special and inconsistent syntax for every
new thingamajig that browser vendors choose to introduce. Need to painfully
look up a CSS reference if you haven't used that special rule in more than a
week as it just doesn't seem to get retained (at-least for me) into long term
memory.

~~~
geon
The syntax is pretty simple. The problem is all the available attributes and
values. I don't see how lisp syntax would help.

~~~
kpil
I guess you could then just plop in a small lisp (scheme!) function instead of
units and values in order to place things as you like them.

You could then have standard functions that did what a lot of the keywords
did.

On the other hand, It could get incredibly complicated too...

------
mhd
If we all had something like Display Postscript, this layout thingamajig would
be delegated to libraries, and we wouldn't have to ask the browser deities to
bestow new gifts upon us. Good adaptive layout would be closer to a new
version of jquery and less Windows XP Service Pack 51.0.2b.

(We also would have more sites that looked liked late 90s Flash, but then
again, we're moving that direction anyway, just with more effort and
convoluted design)

~~~
lomnakkus
While that would probably work fine for display and layout, but it doesn't
work so well with the semantic document model that the web is built on. For
example accessibility would suffer greatly unless every "jquery" (using your
analogy) out there were to implement its own accessibility. (That's not to say
things are absolutely peachy wrt. accessibility these days, but they'd get a
_lot_ worse if everybody had to implement their own.)

~~~
amiga-workbench
I don't know if developers even care about semantic markup anymore, just have
your 5 meg of JavaScript squirt out a bundle of divs and to hell with
accessibility.

~~~
swerner
Just render a png file, server side. The only way to ensure pixel perfect
layout, and it's even going to use less bandwidth than most JS frameworks
these days.

~~~
paulddraper
Wrap that sucker in some HTML with <map> tags and you're golden.

~~~
xaduha
Can't name any site that uses <map> still other than
[http://www.teamfortress.com](http://www.teamfortress.com)

------
matt4077
This is excellent. And with the fast pace of browsers, and the improved habits
of users (or automatic updates), it should be available for 95%+ of users
within a year (It's in the current Safari Technology Preview, so Safari should
get it with the next macOS point update).

This is also a good moment to remind people that you don't need Bootstrap and
the like as much as you used to. Grids were 90% or the reason people started
using these frameworks, and CSS (already with flexbox I'd argue, but
definitely with grids) has caught up and is now easier to use and more
flexible than any framework was.

It's also time to reconsider the atrocity that is class="col_xs_12". I've
never undestood why people would lynch anyone using style="..." but happily
littered their code with those grid classes. With the invention of sass at the
latest, actual semantic class names should have once again become the only
acceptable best practice. With html5, there's also a range of semantic
tags[0], and using them improves both code readability, as well as allowing
all sorts of new ideas in clients (not just browsers, but also text-to-speech
and other accessabiity tools, or spiders, or brosers on new device classes)

o: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main>
<mark> <nav> <section> <summary> <time>

~~~
pilif
_> it should be available for 95%+ of users within a year_

only if you don't have enterprise customers. Those will continue to run IE11
for the foreseeable future as IE11 will remain supported in Windows 10 until
2025.

While Microsoft is pushing Edge as an IE replacement, Edge is still lacking
features and looks too different from IE for companies to feel comfortable
pushing it to their users without retraining them.

~~~
nailer
A lot of conservative enterprise customers are pushing Chrome, managed by
group policy, since new productivity apps don't work well on IE.

~~~
ENGNR
Also for security reasons alone!

I once sent feedback citing security as a moral hazard that someone would get
fired over, as the reason IE8 needed to be ditched.

Chrome showed up a few months later, I'm guessing once they'd tested group
policies and install scripts (which I think google makes very easy these
days). No idea if it was because of me but it was certainly welcome

------
supersan
Makes you wonder why HN won't budge with those <table> tags in the source
code. One day I hope to see "Table layouts are back with <table> tags" and the
HN programmers would have saved themselves so much work.

~~~
orbat
What, exactly, is the problem with the <table> tag in the first place? Been a
long, long time since I last touched HTML

~~~
leppr
It's neither flexible nor semantic.

Flexibility is what allowed webpages to be "responsive" before media-queries
even existed, and semantics is what allows accessibility, search engines, and
other html parsing tools ("readability" in Firefox and Safari, ...) to
function better.

The only advantage it has is that it's old and predictable. That's why it's
still used to format emails for instance, it's reliable and works on most
supports.

~~~
dom0
Most divsoup-layouts are not semantic at all, either.

~~~
monk_e_boy
Exactly this. How are DIVs more semantic than TABLE? And who is reading the
source? Your developers and a web spider. The web spider doesn't care (I wrote
one and getting it to parse DIV content and TABLE content wasn't much effort)

As far as I am aware no spider is looking at the DIV and gathering semantic
information from it. Sure, it may look at the TABLE and initially assume it
has tabular data in it, but a tiny bit of logic fixes that.

~~~
squeaky-clean
> And who is reading the source? Your developers and a web spider.

Or blind people using a screenreader?

DIVs aren't entirely semantic, but table is semantically wrong for how it's
being used. It'd be like if I asked you to "get me the pencil off that
thingie" and pointed at a chair with a pencil on it. As opposed to "get me the
pencil off that table" while pointing at the same chair with a pencil on it.

------
nailer
> Short of taking care of sizing the elements yourself, sadly, you can't have
> both a vertical and horizontal rhythm by just using flexbox alone.

Accompanied by
[https://developers.google.com/web/updates/images/2017/01/css...](https://developers.google.com/web/updates/images/2017/01/css-
grid/alignproblem.png)

I'm pretty familiar with Flex but I simply don't understand and the diagram
doesn't help. What does 'rhythm' mean in terms of layout?

Taking a guess (which I shouldn't be), I can make
[https://developers.google.com/web/updates/images/2017/01/css...](https://developers.google.com/web/updates/images/2017/01/css-
grid/examplelayout.png) with flex, but I'd have header and rest-of-page as
columns, then have rest-of-page as a row with nav and content, then content as
a column with content and footer. I _think_ the article is saying:

> CSS grid means I can do it all at once rather than continually having to
> make rows and columns.

But it doesn't actually say that anywhere (and again I'm guessing).

~~~
ddebernardy
OP is likely referring to vertical rhythm in typography:

[https://zellwk.com/blog/why-vertical-rhythms/](https://zellwk.com/blog/why-
vertical-rhythms/)

~~~
jfoutz
rhythm, or perhaps repetition is one of the core tenants of graphic design.
Once you start looking for it, you'll see it lots of places. It's kind of like
the wilhelm scream sound effect. It's not hard to find strong examples, but
most stuff is divided into a natural harmonic, 1/3 1/4 or 1/5\. movie posters
are an easy example.

Anywho, google helps a bit, [1]. So, yes, you're absolutely right. it's just
quite a bit more widespread than typography

[1]
[https://www.google.com/search?q=rhythm+in+painting&espv=2&bi...](https://www.google.com/search?q=rhythm+in+painting&espv=2&biw=1116&bih=761&tbm=isch&tbo=u&source=univ&sa=X)

~~~
bobwaycott
Nerdy nit: you mean to use the word _tenets_ , not _tenants_. :)

------
TurboHaskal
I still use plain old tables in 2017.

Number of unhappy customers: 0

~~~
mullsork
Except anyone with accessibility requirements, no? As far as I know tables are
horrible for anyone with a screen reader. Can you annotate tables somehow to
work for accessibility purposes?

~~~
return0
The problem with screen readers is summarized "Screen readers assume the
content inside a table is tabular". Are divs better just because they are
undefined? It seems to me that the problem would more easily be solved by
adding some attributes to skip tabular treatment or to add captions, rather
than ditching tables altogether. Table elements like <caption> could even be
used to identify and access parts of the UI pages.

~~~
andybak
> Screen readers assume the content inside a table is tabular

I'm curious to hear from screen reader users. I recall that the gap between
"what web developers think screen readers do" and "what screen readers do" has
always been sizable.

~~~
recklessplayer
Windows based screen readers (more sophisticated than Mac's VoiceOver), let
the users treat only data tables as tables and ignore layout tables. Also
users can adjust announcement of only column headers, only row headers, both
or none while navigating through the data table.

------
cm2187
So basically 15 years late, CSS finally solves this problem. And coming to CSS
in 15 years: adaptive design!

~~~
phkahler
Next up: Revival of the <frame> tag!

~~~
ashark
I seriously wish it'd survived and been enhanced. Much AJAX in practice is
used to replicate the effect of <frame>s, but slower, buggier, and with more
battery drain.

~~~
phkahler
I agree. My understanding was that it had 2 major problems. 1) you could load
other sites or 3rd party content in a frame which caused confusion - browsers
should not have allowed that. 2) search engines had problems with them -
that's not my problem, they should have gotten smarter. May have been helped
by eliminating the first problem.

------
i_like_robots
I've used grid layout a fair amount in the last 6 months or so. It's very
exciting but it can feel quite daunting; the new mechanics and new grammar do
not make the spec an easy read.

Fortunately, I've found that it's quite easy to get to grips with - especially
if you have been around long enough to have sliced designs into table layouts!

Now for a rather shameless plug for my own article on the subject (I hope with
a closer to real world example):

[http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-
ch...](http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-change.html)

------
ToJans
The biggest game-changer to me seems to be the last example, with `grid-
template-areas`. I could probably explain this in a matter of minutes (as
opposed to flexbox).

~~~
zem
I first encountered that idea in chicken scheme's fltk gui binding package:

[http://wiki.call-cc.org/eggref/4/bb#ascii-picture-
interface](http://wiki.call-cc.org/eggref/4/bb#ascii-picture-interface)

------
e12e
This doesn't really fix much - if the idea is to continue to use pixel-based
positioning. I've got devices with a range of dot-pitches (surface 4 pro,
external older monitor, cellphone) - with various physical screen sizes -- A
"150px sidebar" doesn't work the same across these devices - and more
importantly, for a low-resolution 24" screen I'd probably want a similar 3"
side-bar as for a "retina"-resolution 24" screen?

But at least we seem to be moving forward from the abuse of [ed:float]-layouts
for grid-systems...

~~~
NoGravitas
There is no requirement that the units be pixel-based. You can and should
still use em/rem/vh/vw/vmin/vmax depending on your needs, along with media
queries.

------
m_fayer
I've been waiting for the WPF/UWP/XAML grid to come to the web for years and
am delighted to see that it's finally happening. Best layout container I've
ever used.

------
fvargas
[http://caniuse.com/#search=grid](http://caniuse.com/#search=grid)

~~~
iso-8859-1
0.04% prevalence for current unprefixed version

------
stupidcar
Does this include subgrids? As I understand, these are necessary for handling
some basic use cases[1], but browser vendors were refusing to implement them?

[1] [https://blogs.igalia.com/mrego/2016/02/12/subgrids-
thinking-...](https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-
loud/)

~~~
i_like_robots
No, not at this stage.

However `display: contents` may help plaster over the gap.

EDIT, reference: [http://gridbyexample.com/video/subgrid-display-
contents/](http://gridbyexample.com/video/subgrid-display-contents/)

------
BigJono
I'm really excited for this. I've been using pure flexbox layouts for a while
now, but it still has one major problem, in that your HTML structure still
contains layout and positioning information.

Everything is either a column or a row, so in the example layout in the link,
you'd need two container divs. Whereas the grid example can be done without
any.

------
jsemrau
It was 2003 on a day like this when I was doing table layout design for one of
my websites. Somehow it feels like it holds up well.
[http://dnalib.sourceforge.net/](http://dnalib.sourceforge.net/)

------
imafish
Maybe I sound like a broken record, but I still don't understand how layout
can ever be a style.

Why does an HTML <Grid>-element not exist?

~~~
iso-8859-1
If styles are not for layouting, what are they for? Even font-sizes are
layouting, no? You propose just scrapping CSS?

The nice thing about CSS is that you can ignore it in "article view" or
mobile. You can't ignore HTML in the same way. Don't you see the value in
splitting semantic and styling components of a page?

------
konschubert
But does the Grid layout change flow responsively? I mean, will the sidebar
move below the content if the size of the screen is reduced?

With flexbox I can do that implicitly without Media queries

------
rvanmil
Both Android (ConstraintLayout) and iOS (Auto Layout) use Cassowary. Why not
just implement this with CSS as well so we can use the same layout tech for
every platform?

~~~
asurma
Athor here :)

I totally feel you, and that is what Houdini’s Custom Layout is going to be
about: [https://github.com/w3c/css-houdini-
drafts/blob/2b730220b2f3c...](https://github.com/w3c/css-houdini-
drafts/blob/2b730220b2f3c26ec67445d1f96765ebb855421a/css-layout-
api/EXPLAINER.md)

I want to write a blog post about constraing based layouts on the web
specifically, but the TL;DR on why we don’t have it already:

Standardization is hard. It’s especially hard to reach consensus when:

* the runtime for a layout algorithm is hard to estimate

* it can _fail_ (which is unprecedented in CSS)

* a new syntax for constrains would have to be defined.

------
swalsh
My first experience as a young kid in the 90's doing web design was taking the
msn.com home page (I thought it looked nice back then) looking at the source,
and learning. Turns out layout was done using tables. Cool, putting it into
practice though it was really really hard.

The primary force you were always fighting against was inconsistency between
browsers. You might get everything perfect in IE, then load it in Netscape and
there's huge gaps between your awesome solid colored navigation side blocks.
Then making it adjust to the size of the browser was another struggle. After a
while I learned to just make everything fixed size. Then content inside
continues to nest you have to keep subdividing, and things would start to get
out of whack. You adjust one block here, and the side suddenly has these weird
gaps. A large part of it was almost certainly the fact that I was about 13 or
14 years old at the time, and I learned only by looking at example code... but
It was really difficult.

flexbox doesn't really seem to suffer from the problems that made table layout
really suck. I use it mostly indirectly by using the library Bulma, but it's
really wonderful.

~~~
BugsJustFindMe
_The primary force you were always fighting against was inconsistency between
browsers._

None of the things you're complaining about are _table_ 's fault, though. In
the 90s browser vendors didn't target cross-functionality nearly as much as
they do now. They could have easily made tables work even better with a
modicum of intent instead of plunging us into 2 decades (!!!) of
unintelligible nested div hacks that still after all that time weren't up to
the task until some arbitrary number of years from today when this feature is
actually widespread enough to deploy.

------
prewett
This is one of the things that frustrated me about the web world. Stuff that
you could do in 2000 with real UI kits is finally making its way to the
browser. Java/Swing and Qt could do this years ago, and more elegantly.

I don't suppose there is any momentum for starting over with something not
based on a simple word-processing model, but with a real UI foundation.

------
tehchromic
IMhumbleO the redundancy is at issue, because CSS is simply nested key pairs
and so say that HTML should handle only text and tagged divisions in text with
IDs and classes, and leave all the semantics up to the sheets. Folks who point
out that style is semantic are correct, so it's redundant to allow all these
structural tags in HTML that are intended to give semantic formatting to text,
and instead CSS should be reliably the only source of semantic formatting.
Therefore, only one HTML element and everything else attributes or key pairs
in the sheets.

Also I find js2css works well to keep component style in place with MVC web
components.

(This comment is a response to the multiple inevitable discussions on the
merits of HTML/CSS and what is bad or good and how it all should be different,
great stuff, thanks for it)

------
B1FF_PSUVM
Yes, please. Putting 'styles' in charge of layout was always madness.

Every time I hit the wrong link because the browser engine finally figured out
it should move things around one more time just that millisecond, my soul gets
blackened by the wish to strangle someone.

~~~
Fifer82
I wonder if there is a name for this rage. I did what you did but I did it
twice in a row and one of them was an ad that crashed safari. If someone had
teleported me into the dev's office during that 10 second period, it would
have been an absolute slaughter house.

------
return0
why is this better than tables?

~~~
ZeroGravitas
Because <table> indicates that it contains tabular data, and implies lots of
things about the content that it contains that would be misleading when using
table-based layout.

And display: table, which uses CSS to make things look the same, without
implying anything about the content, wasn't supported by Microsoft, back when
they they were a) the only browser that mattered, and b) trying to hold back
the web to protect their monopolies, so people worked around their damage by
using the tools that happened to already be available in IE (see also the
invention of AJAX)

Once Microsoft caught up, people who understand CSS started using display:
table whenever it helped. People who didn't kept complaining that you couldn't
just use <table>.

~~~
return0
Well the issue of semantics was not exactly solved by turning everything to
<div>s. It's still a mess, but a different mess. I would even say it's bad to
have display:table-cell because it's reduntant.

~~~
ZeroGravitas
If you're using a <div> just so you can lay things out visually, then its lack
of semantics is appropriate. Presumably you use artices, headers, paragraphs,
asides, links, img, lists etc. within those non-semantic "container" divs to
convey the semantics.

I'm not claiming it's perfect, but it's like government data being released as
a CSV vs a PDF with a scan of paper document. Structured data is better for
lots of reasons, even if it's only minimally structured.

------
jiaweihli
It looks like this is getting released in the next major version of most
browsers[1].

For Chrome, that means no sooner than 03/14/17\. That version, Chrome 57, will
also come with automatic background tab throttling[2].

[1] [http://caniuse.com/#search=grid](http://caniuse.com/#search=grid)

[2]
[https://news.ycombinator.com/item?id=13471543](https://news.ycombinator.com/item?id=13471543)

~~~
drinchev
Except for mobile ( Android, iOS ), which is the main reason that we use
responsive design anyway.

I will stick to flexbox for a while.

------
activatedgeek
Why is this problem so hard when CSS does so much for node positioning? Why
not create a simpler standard once and for all?

~~~
BugsJustFindMe
We had a simpler standard in 1995. It was called tables and it did this
exceptionally well and more importantly was easy enough for even amateurs to
understand. And then armchair demagogues decided that markup should no longer
be used for markup, setting web layout back decades and creating the field of
web designers whose major accomplishment was understanding stupid div hacks.

~~~
rimantas
Your comment is the best example of the demagogue. Zero understanding of the
issue, the problems that tables caused. But it was easy, right?

~~~
BugsJustFindMe
Every time this subject comes up, someone trots out the old canard that tables
messed with screen readers and therefore were irretrievably bad.

Or they say from the highest and mightiest and ivoryest pedestal "separation
of semantics and display, thus spaketh the lord" pretending, of course, that
modern websites look and behave just like documents when that's demonstrably
false, and that tables are therefore irretrievably bad.

And instead you now have, 20 years later (TWENTY! YEARS!) something that only
now works as well for layout.

Adding "not-data" and navigation directives to tables to aid screen readers
and separate semantics would not have taken 20 years.

And now you'll have to wait another 5 years before this new, "just as good as
tables!" feature is sufficiently widespread to actually deploy it without a
polyfill shim.

But please tell me more about what I do or don't know.

------
AustinG08
What CSS really needs is a canonical standard, and a tool for generating CSS
compatible styles for ALL browsers down to IE8. Until then, I'm more than
happy to skip these new layout techniques.

------
throwaway2016a
Link to CanIUse for anyone wondering if this might be practical to use in a
real project:

[http://caniuse.com/#search=grid](http://caniuse.com/#search=grid)

------
jtms
This article's title is total clickbait BS. This has __NOTHING __to do with
table layout or tabular data.

------
willlll
On my professional web site I just kept using real tables for layout.

~~~
bbcbasic
Pray for absolution

------
mozumder
This has nothing to do with table layout, unfortunately.

------
grabcocque
Just to point out this page doesn't scale properly on iOS when you pinch to
zoom. CSS TFW.

