35 ms·

CSS Grid – Table layout is back. Be there and be square

477 points by ghosh 10y ago

cm2187 10y ago
So basically 15 years late, CSS finally solves this problem. And coming to CSS in 15 years: adaptive design!
- B1FF_PSUVM 10y ago
  Thirty year cycle, seems about the right interval for moving bones around in the graveyard, as traditional in all kinds of fashion and research.
  - edblarney 10y ago
    It's generational. 30 years is enough for one generation to be replaced in whatever industry. And so we forget. Same in politics, war, fashion, tech, research, literature, art, music. Just keep those 'skinny jeans' in the back of the closet for New Years Eve 2045 ...
- phkahler 10y ago
  Next up: Revival of the <frame> tag!
  - paulddraper 10y ago
    content-src: url("http://example.org")
  - ashark 10y ago
    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 10y ago
      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.
activatedgeek 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      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.
    - pessimizer 10y ago
      Better than naked ad hominem and the silly assumption that people on a site largely aimed at web developers aren't as smart as you are.
stupidcar 10y ago
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-out-loud/ https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-...
- i_like_robots 10y ago
  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/
return0 10y ago
why is this better than tables?
- dvh 10y ago
  Because tables are bad!
  - tobltobs 10y ago
    Why?
    - test1235 10y ago
      I guess semantically it doesn't make sense and messes up the content flow for those who don't have css enabled on whatever browser they're using.
- coldtea 10y ago
  Because designers parroted some early bullshitters and applied the "semantic" and "separation of content and presentation" notions at the wrong level.
- MisterBastahrd 10y ago
  More flexible than table based layouts and it doesn't completely hose screen readers for the visually challenged.
- ZeroGravitas 10y ago
  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>.
jiaweihli 10y ago
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 10y ago
  Except for mobile ( Android, iOS ), which is the main reason that we use responsive design anyway. I will stick to flexbox for a while.
nailer 10y ago
> 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-grid/alignproblem.png https://developers.google.com/web/updates/images/2017/01/css... 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-grid/examplelayout.png https://developers.google.com/web/updates/images/2017/01/css... 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 10y ago
  OP is likely referring to vertical rhythm in typography: https://zellwk.com/blog/why-vertical-rhythms/ https://zellwk.com/blog/why-vertical-rhythms/
  - jfoutz 10y ago
    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&biw=1116&bih=761&tbm=isch&tbo=u&source=univ&sa=X https://www.google.com/search?q=rhythm+in+painting&espv=2&bi...
    - bobwaycott 10y ago
      Nerdy nit: you mean to use the word tenets, not tenants. :)
  - 10y ago
deleted 10y ago
[deleted]
BigJono 10y ago
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.
ToJans 10y ago
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).
- jazoom 10y ago
  Yes, that is magical, in a very good way. Edge had better get support this year or I'll consider placing a warning on my website to all Edge users that the layout won't work. I'm over supporting lagging browsers.
- zem 10y ago
  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
grabcocque 10y ago
Just to point out this page doesn't scale properly on iOS when you pinch to zoom. CSS TFW.
mhd 10y ago
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)
- ebalit 10y ago
  What would be the advantage over SVG ?
  - mhd 10y ago
    PostScript is a programming language.
    - milesrout 10y ago
      I don't see how that's a benefit.
      - xaduha 10y ago
        Exactly. Also happens when people talk about would-be DSL that they made on top of existing language and mention that you can always fallback to using it. But that's the whole point of the domain-specific language that it is not a generic purpose one! Sometimes less is more and constraints are good, there are things that you shouldn't shoehorn.
    - ebalit 10y ago
      Over SVG with Javascript if you prefer.
    - e12e 10y ago
      Indeed: https://news.ycombinator.com/item?id=13529345 https://news.ycombinator.com/item?id=13529345 ("Hacking Printers Advisory 1/6: PostScript printers vulnerable to print job capture ").
mozumder 10y ago
This has nothing to do with table layout, unfortunately.
rvanmil 10y ago
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?
- aocvr 10y ago
  The projects listed here under "Web" try to achieve that: http://overconstrained.io/ http://overconstrained.io/
- asurma 10y ago
  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/2b730220b2f3c26ec67445d1f96765ebb855421a/css-layout-api/EXPLAINER.md https://github.com/w3c/css-houdini-drafts/blob/2b730220b2f3c... 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.
B1FF_PSUVM 10y ago
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 10y ago
  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.
TurboHaskal 10y ago
I still use plain old tables in 2017. Number of unhappy customers: 0
- mullsork 10y ago
  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 10y ago
    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 10y ago
      > 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 10y ago
        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.
    - extra88 10y ago
      Using tables for layout is so commonplace, I think most screenreader makers basically gave up and don't treat a table as a table unless it includes headers (<th>). Of course people who choose to use tables for layout also skip using more semantic elements, have a lot less flexibility to make layout changes (because their choices are expressed in HTML instead of CSS), and have a lot more trouble making their designs responsive.
supersan 10y ago
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.
- Pyxl101 10y ago
  Would there be a benefit to changing from <table> to something else, if <table> works just fine for the purpose? If it ain't broke, right?
  - robin_reala 10y ago
    It is broken. Every single comment is announced (in Voiceover at least) with “Row x of y. Column 1 of 1”. With proper markup you could either avoid that entirely, or announce a correct relationship with ARIA attributes.
    - PeterisP 10y ago
      Isn't this more of a sign that Voiceover is broken, as even a "true" single column table should not be read that way?
      - robin_reala 10y ago
        Potentially, although it’s not VoiceOver but what the browser exposes as an accessible table. Chrome and Firefox have horrible hand-coded algorithms to determine what should be a data table or not: https://dxr.mozilla.org/mozilla-central/source/accessible/html/HTMLTableAccessible.cpp#920 https://dxr.mozilla.org/mozilla-central/source/accessible/ht... https://cs.chromium.org/chromium/src/third_party/WebKit/Source/modules/accessibility/AXTable.cpp?l=94 https://cs.chromium.org/chromium/src/third_party/WebKit/Sour...
- orbat 10y ago
  What, exactly, is the problem with the <table> tag in the first place? Been a long, long time since I last touched HTML
matt4077 10y ago
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 10y ago
  > 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.
  - douche 10y ago
    > 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. We're still supporting IE9... It was a glorious day when we could finally give up on IE8.
  - bgarbiak 10y ago
    It's not a problem in this particular case, as CSS Grid was introduced by Microsoft, in IE10. So, more or less, four years ago. I chuckle when Google announces that Chrome will support this feature as the next big thing, while it was clear years ago that this approach is much better than flexbox. But, I'm glad it finally lands in all browsers.
fvargas 10y ago
http://caniuse.com/#search=grid http://caniuse.com/#search=grid
- iso-8859-1 10y ago
  0.04% prevalence for current unprefixed version
imafish 10y ago
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 10y ago
  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?
e12e 10y ago
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 10y ago
  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.
- colept 10y ago
  I am wondering if this layout engine also has issues with half-pixel placements? With Flexbox, if you position an element in a way that it lands on a half-pixel, it becomes blurry.
jsemrau 10y ago
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/
konschubert 10y ago
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
tannhaeuser 10y ago
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.
- tinco 10y ago
  Originally, it was not known that HTML pages would be so finely designed. It is not a naieve dichotomy, it is an attainable ideal that has had a very positive effect on the state of the web. We owe huge thanks to this movement that lead both to the demise of proprietary browser extensions (like flash) and to the awesome technologies in browsers today such as these CSS features, new HTML elements and transport protocols.
  - tannhaeuser 10y ago
    These things, while beneficial, don't owe their existence to CSS. Instead, introducing eg. CSS shapes or `content: ` (as two extreme examples) was the way of least resistance/guerilla tactics, as opposed to putting the functionality into SVG proper, or aligning the layout box model better with the DOM model, resp. Now what we're left with is a way overcomplicated mess for generations to clean up. There's a reason Mozilla spent the better part of the decade to come up with a new web renderer. Don't get me wrong. I praise CSS for it has given designers ways to come up with new UI idioms (something I'm personally fascinated with). But I will say this has happened in spite of, rather than because of, CSS's qualities. Designers other than outright CSS nerds are struggling with CSS, and CSS is lacking badly from a basic maintainability perspective IMHO. CSS as a language puts an unnecessarily high cognitive burden on casual web developers by lacking a construct to capture the "intent" of a couple coordinated CSS rules; as a result, unless you're doing CSS every day, you're easily lost in your (or someone else's) CSS. This isn't helped by seemingly arbitrary decisions as to what goes into CSS vs. HTML. For example, responsive images eg. the `picture` element became an HTML element, but arguably should have been subject to CSS media queries instead. Which is kindof my initial point: that the HTML/CSS dichotomy is accidental and pointless from a language theory PoV.
swalsh 10y ago
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 10y ago
  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.
m_fayer 10y ago
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.
i_like_robots 10y ago
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-change.html http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-ch...
throwaway2016a 10y ago
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
willlll 10y ago
On my professional web site I just kept using real tables for layout.
- bbcbasic 10y ago
  Pray for absolution
prewett 10y ago
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.
AustinG08 10y ago
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.
deleted 10y ago
[deleted]
tehchromic 10y ago
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)
jtms 10y ago
This article's title is total clickbait BS. This has NOTHING to do with table layout or tabular data.

477 points by ghosh 10y ago

cm2187 10y ago

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

B1FF_PSUVM 10y ago
Thirty year cycle, seems about the right interval for moving bones around in the graveyard, as traditional in all kinds of fashion and research.
- edblarney 10y ago
  It's generational. 30 years is enough for one generation to be replaced in whatever industry. And so we forget. Same in politics, war, fashion, tech, research, literature, art, music. Just keep those 'skinny jeans' in the back of the closet for New Years Eve 2045 ...
phkahler 10y ago
Next up: Revival of the <frame> tag!
- paulddraper 10y ago
  content-src: url("http://example.org")
- ashark 10y ago
  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 10y ago
    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.

activatedgeek 10y ago

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 10y ago
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 10y ago
  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 10y ago
    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.
  - pessimizer 10y ago
    Better than naked ad hominem and the silly assumption that people on a site largely aimed at web developers aren't as smart as you are.

stupidcar 10y ago

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-out-loud/ https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-...

i_like_robots 10y ago
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/

return0 10y ago

why is this better than tables?

dvh 10y ago
Because tables are bad!
- tobltobs 10y ago
  Why?
  - test1235 10y ago
    I guess semantically it doesn't make sense and messes up the content flow for those who don't have css enabled on whatever browser they're using.
coldtea 10y ago
Because designers parroted some early bullshitters and applied the "semantic" and "separation of content and presentation" notions at the wrong level.
MisterBastahrd 10y ago
More flexible than table based layouts and it doesn't completely hose screen readers for the visually challenged.
ZeroGravitas 10y ago
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>.

jiaweihli 10y ago

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 10y ago
Except for mobile ( Android, iOS ), which is the main reason that we use responsive design anyway. I will stick to flexbox for a while.

nailer 10y ago

> 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-grid/alignproblem.png https://developers.google.com/web/updates/images/2017/01/css... 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-grid/examplelayout.png https://developers.google.com/web/updates/images/2017/01/css... 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 10y ago
OP is likely referring to vertical rhythm in typography: https://zellwk.com/blog/why-vertical-rhythms/ https://zellwk.com/blog/why-vertical-rhythms/
- jfoutz 10y ago
  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&biw=1116&bih=761&tbm=isch&tbo=u&source=univ&sa=X https://www.google.com/search?q=rhythm+in+painting&espv=2&bi...
  - bobwaycott 10y ago
    Nerdy nit: you mean to use the word tenets, not tenants. :)
- 10y ago

deleted 10y ago

[deleted]

BigJono 10y ago

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.

ToJans 10y ago

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).

jazoom 10y ago
Yes, that is magical, in a very good way. Edge had better get support this year or I'll consider placing a warning on my website to all Edge users that the layout won't work. I'm over supporting lagging browsers.
zem 10y ago
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

grabcocque 10y ago

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

mhd 10y ago

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)

ebalit 10y ago
What would be the advantage over SVG ?
- mhd 10y ago
  PostScript is a programming language.
  - milesrout 10y ago
    I don't see how that's a benefit.
    - xaduha 10y ago
      Exactly. Also happens when people talk about would-be DSL that they made on top of existing language and mention that you can always fallback to using it. But that's the whole point of the domain-specific language that it is not a generic purpose one! Sometimes less is more and constraints are good, there are things that you shouldn't shoehorn.
  - ebalit 10y ago
    Over SVG with Javascript if you prefer.
  - e12e 10y ago
    Indeed: https://news.ycombinator.com/item?id=13529345 https://news.ycombinator.com/item?id=13529345 ("Hacking Printers Advisory 1/6: PostScript printers vulnerable to print job capture ").

mozumder 10y ago

This has nothing to do with table layout, unfortunately.

rvanmil 10y ago

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?

aocvr 10y ago
The projects listed here under "Web" try to achieve that: http://overconstrained.io/ http://overconstrained.io/
asurma 10y ago
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/2b730220b2f3c26ec67445d1f96765ebb855421a/css-layout-api/EXPLAINER.md https://github.com/w3c/css-houdini-drafts/blob/2b730220b2f3c... 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.

B1FF_PSUVM 10y ago

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 10y ago
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.

TurboHaskal 10y ago

I still use plain old tables in 2017. Number of unhappy customers: 0

mullsork 10y ago
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 10y ago
  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 10y ago
    > 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 10y ago
      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.
  - extra88 10y ago
    Using tables for layout is so commonplace, I think most screenreader makers basically gave up and don't treat a table as a table unless it includes headers (<th>). Of course people who choose to use tables for layout also skip using more semantic elements, have a lot less flexibility to make layout changes (because their choices are expressed in HTML instead of CSS), and have a lot more trouble making their designs responsive.

supersan 10y ago

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.

Pyxl101 10y ago
Would there be a benefit to changing from <table> to something else, if <table> works just fine for the purpose? If it ain't broke, right?
- robin_reala 10y ago
  It is broken. Every single comment is announced (in Voiceover at least) with “Row x of y. Column 1 of 1”. With proper markup you could either avoid that entirely, or announce a correct relationship with ARIA attributes.
  - PeterisP 10y ago
    Isn't this more of a sign that Voiceover is broken, as even a "true" single column table should not be read that way?
    - robin_reala 10y ago
      Potentially, although it’s not VoiceOver but what the browser exposes as an accessible table. Chrome and Firefox have horrible hand-coded algorithms to determine what should be a data table or not: https://dxr.mozilla.org/mozilla-central/source/accessible/html/HTMLTableAccessible.cpp#920 https://dxr.mozilla.org/mozilla-central/source/accessible/ht... https://cs.chromium.org/chromium/src/third_party/WebKit/Source/modules/accessibility/AXTable.cpp?l=94 https://cs.chromium.org/chromium/src/third_party/WebKit/Sour...
orbat 10y ago
What, exactly, is the problem with the <table> tag in the first place? Been a long, long time since I last touched HTML

matt4077 10y ago

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 10y ago
> 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.
- douche 10y ago
  > 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. We're still supporting IE9... It was a glorious day when we could finally give up on IE8.
- bgarbiak 10y ago
  It's not a problem in this particular case, as CSS Grid was introduced by Microsoft, in IE10. So, more or less, four years ago. I chuckle when Google announces that Chrome will support this feature as the next big thing, while it was clear years ago that this approach is much better than flexbox. But, I'm glad it finally lands in all browsers.

fvargas 10y ago

http://caniuse.com/#search=grid http://caniuse.com/#search=grid

iso-8859-1 10y ago
0.04% prevalence for current unprefixed version

imafish 10y ago

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 10y ago
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?

e12e 10y ago

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 10y ago
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.
colept 10y ago
I am wondering if this layout engine also has issues with half-pixel placements? With Flexbox, if you position an element in a way that it lands on a half-pixel, it becomes blurry.

jsemrau 10y ago

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/

konschubert 10y ago

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

tannhaeuser 10y ago

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.

tinco 10y ago
Originally, it was not known that HTML pages would be so finely designed. It is not a naieve dichotomy, it is an attainable ideal that has had a very positive effect on the state of the web. We owe huge thanks to this movement that lead both to the demise of proprietary browser extensions (like flash) and to the awesome technologies in browsers today such as these CSS features, new HTML elements and transport protocols.
- tannhaeuser 10y ago
  These things, while beneficial, don't owe their existence to CSS. Instead, introducing eg. CSS shapes or `content: ` (as two extreme examples) was the way of least resistance/guerilla tactics, as opposed to putting the functionality into SVG proper, or aligning the layout box model better with the DOM model, resp. Now what we're left with is a way overcomplicated mess for generations to clean up. There's a reason Mozilla spent the better part of the decade to come up with a new web renderer. Don't get me wrong. I praise CSS for it has given designers ways to come up with new UI idioms (something I'm personally fascinated with). But I will say this has happened in spite of, rather than because of, CSS's qualities. Designers other than outright CSS nerds are struggling with CSS, and CSS is lacking badly from a basic maintainability perspective IMHO. CSS as a language puts an unnecessarily high cognitive burden on casual web developers by lacking a construct to capture the "intent" of a couple coordinated CSS rules; as a result, unless you're doing CSS every day, you're easily lost in your (or someone else's) CSS. This isn't helped by seemingly arbitrary decisions as to what goes into CSS vs. HTML. For example, responsive images eg. the `picture` element became an HTML element, but arguably should have been subject to CSS media queries instead. Which is kindof my initial point: that the HTML/CSS dichotomy is accidental and pointless from a language theory PoV.

swalsh 10y ago

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 10y ago
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.

m_fayer 10y ago

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.

i_like_robots 10y ago

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-change.html http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-ch...

throwaway2016a 10y ago

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

willlll 10y ago

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

bbcbasic 10y ago
Pray for absolution

prewett 10y ago

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.

AustinG08 10y ago

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.

deleted 10y ago

[deleted]

tehchromic 10y ago

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)

jtms 10y ago

This article's title is total clickbait BS. This has NOTHING to do with table layout or tabular data.