7 ms·

Get on the CSS Grid

91 points by chrisfarms 13y ago

Robadob 13y ago
This seems very similar to Java's gridbag layout manager (http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html http://docs.oracle.com/javase/tutorial/uiswing/layout/gridba...) in terms of functionality. I always liked the flexibility of using that layout manager (although I always managed it via visual editors) so if this does reach mainstream compatibility it could be good! As comments on the article point out, it seems to overlap with FlexBox quite a bit though.
- SideburnsOfDoom 13y ago
  I think it's actually based on the grids in WPF ( http://en.wikipedia.org/wiki/Windows_Presentation_Foundation http://en.wikipedia.org/wiki/Windows_Presentation_Foundation ). This is no bad thing; those grids are superb for UI layout. Look at the editors list; this comes out of MS. Again, it's good that they feed this out into web standards.
  - revelation 13y ago
    Very much reminded me of WPF, where grids are awesome. This being CSS, the syntax is a bit wonky, but it is certainly very good news for a world stuck in "pick any one of three sizes" bootstrap grids.
SideburnsOfDoom 13y ago
I see that this draft is dated January 2014. Earlier versions go back to April 2011: http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ What's changed in this version?
- mankyd 13y ago
  It seems the what's mostly changed is support. IE10 has it, and Chrome has it experimentally.
  - oneeyedpigeon 13y ago
    Chrome appears to have some of it experimentally. For example, the old 'grid-definition-columns' which was removed from the spec is supported, but the newer (?) 'grid-template-columns' isn't. Alignment doesn't seem to work, at least as I understand it should (e.g. 'align-self: center' should vertically align a grid item).
    - apaprocki 13y ago
      This is work that Igalia is doing for us. There are a lot of patches pending that haven't landed yet: https://codereview.chromium.org/149373004/ https://codereview.chromium.org/149373004/
SideburnsOfDoom 13y ago
This proposal has been around for a while (April 2011 version: http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ ) and if I recall correctly it has been on and off the Firefox roadmap. https://wiki.mozilla.org/Platform/Roadmap#Layout https://wiki.mozilla.org/Platform/Roadmap#Layout "CSS Grid Layout is coming to Firefox in 2012": http://www.2ality.com/2012/03/css-grid-layout-firefox.html http://www.2ality.com/2012/03/css-grid-layout-firefox.html So where is Firefox support for this? Was there a good reason to delay, or was it just other priorities? Did flexbox take much longer than expected?
- agapos 13y ago
  Supporting standards is pretty unimportant when you have an interface to ruin, ads to sneak in, an unasked os to support, etc... /s To be on topic, there isn't much activity in the bug topic: https://bugzilla.mozilla.org/show_bug.cgi?id=616605 https://bugzilla.mozilla.org/show_bug.cgi?id=616605. Two blockers landed in Fx30, but that is well within the statistical margins of randomness.
  - tasty_freeze 13y ago
    Wow, just scanned your comment history. You really have boner about slagging on Firefox. What is your story? Every browser has good points and bad points, but for some reason you myopically focus on the shortcomings, real or perceived, of firefox. I understand fanboy mentality of being invested in something and over promoting it, but I don't understand where you are coming from. Care to elaborate?
    - agapos 13y ago
      Even if my comments (those few I posted already, what shouldn't be enough of a basis for such conclusions) seem to indicate that I dislike Firefox, that is not the case. I have little against Firefox itself, so much I use it as my main browser, and the Beta as secondary. Though, I have to admit I went over with the above comment, as more than half was off-topic (and most likely the source of down voting). What I do not like is some of the decisions Mozilla leaders made lately. For example, I am clearly against the Directory Tiles or Australis in it's current form, but I support the rapid release cycle, as it clearly threw back Fx into the race and is now one of the top two browsers. what was also hasty without the 'addons are compatible by default' and Mozilla Maintenance Service
nobbyclark 13y ago
So we return to tables ...
- jebblue 13y ago
  At 1:35 he says "you can do all sorts of things you can't do with tables". I think I'll continue learning jQuery Mobile and run on a wide variety of devices and PC's. http://demos.jquerymobile.com/1.3.0-beta.1/docs/content/content-grids-responsive.html# http://demos.jquerymobile.com/1.3.0-beta.1/docs/content/cont...
- kirkbackus 13y ago
  It may seem like that, but the major difference is the layout is left to the CSS. When combined with css media queries, the grid can provide a complete restructuring of the layout completely independent of the markup which would not would have been possible with tables.
  - ahoy 13y ago
    This is a hugely important difference.
  - SideburnsOfDoom 13y ago
    Grids are also significantly more flexible and more responsive than tables. You finally get reliable vertical centering of elements as a side-benefit. Tables got a very bad name because they were abused back when they were the only thing available for layout: "if the only tool you have is a hammer..." Yes, but sometimes data is actually tabular. Grids are good for UI layout. The web was just for documents, but not any more. So now we need good ways to lay out UIs.
    - chrismonsanto 13y ago
      > You finally get reliable vertical centering of elements as a side-benefit. Worth noting that you already get this with flexbox's align-items: center, which you can use today!
apaprocki 13y ago
Bloomberg has been funding Igalia to land CSS Grid implementation work in both WebKit and Blink. Igalia wrote a recent blog post about the latest work: http://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-layout/ http://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-la...
Geee 13y ago
Great, but I feel horrible at the same time because browser just slowly reinvents everything, and is still limited to a single specific implementation. How about just make Javascript frigging fast so everyone can code their own layout system? How about standard NaCl interface for layouting? Browser needs to be an open platform, not a framework.
- pcwalton 13y ago
  > How about just make Javascript frigging fast so everyone can code their own layout system? How about standard NaCl interface for layouting? If layout were in JS (or PNaCl), we wouldn't be able to run it off the main thread, or parallelize it in Servo, or experiment with running it on the GPU. We would also lose the ability to do text reformatting on mobile, accessibility would be harder, etc. To elaborate in regards to running CSS off the main thread: We got very lucky that IE's extensions to allow JavaScript in the middle of CSS evaluation (and also possibly XBL) never caught on, and so CSS can be done more or less entirely independent of the main JS event loop (unless the styling is performed in response to a direct JS query, e.g. getComputedStyle). If layout were performed by JS, there would be no hope: layout could perform arbitrary JS manipulations and we would be no choice other than to stall the main event loop while styling is happening (as current browsers do). But because CSS is largely separated from JS, we can just run it off the main thread and allow JavaScript to run uninterrupted by layout.
- yogo 13y ago
  > just slowly reinvents everything Yep. Not sure why they didn't just copy WPF or even Android's way years ago.
- dragonwriter 13y ago
  > How about just make Javascript frigging fast so everyone can code their own layout system? Because separating content (HTML) from layout (CSS) from behavior (JS) is a good thing, and because, particularly, being able to have content work without layout or behavior (for situations where you just need the content), and to have content and layout work without behavior (for situations where you just need static presentation) are important.
AshleysBrain 13y ago
Is there any non-video documentation? I find videos painfully slow compared to scrolling through some quick actual code examples side-by-side with results.
- paxtonab 13y ago
  http://www.w3.org/TR/css-grid-1/ http://www.w3.org/TR/css-grid-1/
kendalk 13y ago
Prediction: Sometime in 2018 we will have a thread: "Ask HN: Is it finally time to use CSS grids?"
- SideburnsOfDoom 13y ago
  Prediction: The response will be "not until Firefox supports it".
paxtonab 13y ago
Is this an attempt to standardize the grid layouts that everyone has to either build themselves or use a framework like bootstrap for?
- vegustui 13y ago
  This is way better.
mitchtbaum 13y ago
If future browsers include default grid display systems, then [YUI's PureCSS Grid Library](0) is a modern-backwards compatability layer. It seems even to have a "leave no browser behind" philosophy, because you can generate usable output for even IE 6 & 7. [YUI Open Roundtable - Pure CSS with Tilo Mitra and Eric Ferraiuolo](1) is widely informative with amazing demos of each of the latest tools involved. The docs are split across http://stage.purecss.io/grids/ http://stage.purecss.io/grids/ and http://yuilibrary.com/yui/docs/cssgrids/ http://yuilibrary.com/yui/docs/cssgrids/ ; overall, they're sweet and concise. 0: http://purecss.io/grids/ http://purecss.io/grids/ 1: https://www.youtube.com/watch?v=t4w3e-JRXy0 https://www.youtube.com/watch?v=t4w3e-JRXy0
applecore 13y ago
Is there a JS library/framework that lets me use this now?
- andybak 13y ago
  Google for css grids polyfill.
vegustui 13y ago
CSS grid is what CSS should have been from the beginning.
keeperofdakeys 13y ago
For 95% of what people want this for, CSS tables would probably work just as well ("display: table" ). The main advantage of this seems to be the "minmax" ability, and some rethinking of the api, since CSS tables are semantically based on HTML tables.

91 points by chrisfarms 13y ago

This seems very similar to Java's gridbag layout manager (http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html http://docs.oracle.com/javase/tutorial/uiswing/layout/gridba...) in terms of functionality. I always liked the flexibility of using that layout manager (although I always managed it via visual editors) so if this does reach mainstream compatibility it could be good! As comments on the article point out, it seems to overlap with FlexBox quite a bit though.

SideburnsOfDoom 13y ago
I think it's actually based on the grids in WPF ( http://en.wikipedia.org/wiki/Windows_Presentation_Foundation http://en.wikipedia.org/wiki/Windows_Presentation_Foundation ). This is no bad thing; those grids are superb for UI layout. Look at the editors list; this comes out of MS. Again, it's good that they feed this out into web standards.
- revelation 13y ago
  Very much reminded me of WPF, where grids are awesome. This being CSS, the syntax is a bit wonky, but it is certainly very good news for a world stuck in "pick any one of three sizes" bootstrap grids.

SideburnsOfDoom 13y ago

I see that this draft is dated January 2014. Earlier versions go back to April 2011: http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ What's changed in this version?

mankyd 13y ago
It seems the what's mostly changed is support. IE10 has it, and Chrome has it experimentally.
- oneeyedpigeon 13y ago
  Chrome appears to have some of it experimentally. For example, the old 'grid-definition-columns' which was removed from the spec is supported, but the newer (?) 'grid-template-columns' isn't. Alignment doesn't seem to work, at least as I understand it should (e.g. 'align-self: center' should vertically align a grid item).
  - apaprocki 13y ago
    This is work that Igalia is doing for us. There are a lot of patches pending that haven't landed yet: https://codereview.chromium.org/149373004/ https://codereview.chromium.org/149373004/

SideburnsOfDoom 13y ago

This proposal has been around for a while (April 2011 version: http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ ) and if I recall correctly it has been on and off the Firefox roadmap. https://wiki.mozilla.org/Platform/Roadmap#Layout https://wiki.mozilla.org/Platform/Roadmap#Layout "CSS Grid Layout is coming to Firefox in 2012": http://www.2ality.com/2012/03/css-grid-layout-firefox.html http://www.2ality.com/2012/03/css-grid-layout-firefox.html So where is Firefox support for this? Was there a good reason to delay, or was it just other priorities? Did flexbox take much longer than expected?

agapos 13y ago
Supporting standards is pretty unimportant when you have an interface to ruin, ads to sneak in, an unasked os to support, etc... /s To be on topic, there isn't much activity in the bug topic: https://bugzilla.mozilla.org/show_bug.cgi?id=616605 https://bugzilla.mozilla.org/show_bug.cgi?id=616605. Two blockers landed in Fx30, but that is well within the statistical margins of randomness.
- tasty_freeze 13y ago
  Wow, just scanned your comment history. You really have boner about slagging on Firefox. What is your story? Every browser has good points and bad points, but for some reason you myopically focus on the shortcomings, real or perceived, of firefox. I understand fanboy mentality of being invested in something and over promoting it, but I don't understand where you are coming from. Care to elaborate?
  - agapos 13y ago
    Even if my comments (those few I posted already, what shouldn't be enough of a basis for such conclusions) seem to indicate that I dislike Firefox, that is not the case. I have little against Firefox itself, so much I use it as my main browser, and the Beta as secondary. Though, I have to admit I went over with the above comment, as more than half was off-topic (and most likely the source of down voting). What I do not like is some of the decisions Mozilla leaders made lately. For example, I am clearly against the Directory Tiles or Australis in it's current form, but I support the rapid release cycle, as it clearly threw back Fx into the race and is now one of the top two browsers. what was also hasty without the 'addons are compatible by default' and Mozilla Maintenance Service

nobbyclark 13y ago

So we return to tables ...

jebblue 13y ago
At 1:35 he says "you can do all sorts of things you can't do with tables". I think I'll continue learning jQuery Mobile and run on a wide variety of devices and PC's. http://demos.jquerymobile.com/1.3.0-beta.1/docs/content/content-grids-responsive.html# http://demos.jquerymobile.com/1.3.0-beta.1/docs/content/cont...
kirkbackus 13y ago
It may seem like that, but the major difference is the layout is left to the CSS. When combined with css media queries, the grid can provide a complete restructuring of the layout completely independent of the markup which would not would have been possible with tables.
- ahoy 13y ago
  This is a hugely important difference.
- SideburnsOfDoom 13y ago
  Grids are also significantly more flexible and more responsive than tables. You finally get reliable vertical centering of elements as a side-benefit. Tables got a very bad name because they were abused back when they were the only thing available for layout: "if the only tool you have is a hammer..." Yes, but sometimes data is actually tabular. Grids are good for UI layout. The web was just for documents, but not any more. So now we need good ways to lay out UIs.
  - chrismonsanto 13y ago
    > You finally get reliable vertical centering of elements as a side-benefit. Worth noting that you already get this with flexbox's align-items: center, which you can use today!

apaprocki 13y ago

Bloomberg has been funding Igalia to land CSS Grid implementation work in both WebKit and Blink. Igalia wrote a recent blog post about the latest work: http://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-layout/ http://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-la...

Geee 13y ago

Great, but I feel horrible at the same time because browser just slowly reinvents everything, and is still limited to a single specific implementation. How about just make Javascript frigging fast so everyone can code their own layout system? How about standard NaCl interface for layouting? Browser needs to be an open platform, not a framework.

pcwalton 13y ago
> How about just make Javascript frigging fast so everyone can code their own layout system? How about standard NaCl interface for layouting? If layout were in JS (or PNaCl), we wouldn't be able to run it off the main thread, or parallelize it in Servo, or experiment with running it on the GPU. We would also lose the ability to do text reformatting on mobile, accessibility would be harder, etc. To elaborate in regards to running CSS off the main thread: We got very lucky that IE's extensions to allow JavaScript in the middle of CSS evaluation (and also possibly XBL) never caught on, and so CSS can be done more or less entirely independent of the main JS event loop (unless the styling is performed in response to a direct JS query, e.g. getComputedStyle). If layout were performed by JS, there would be no hope: layout could perform arbitrary JS manipulations and we would be no choice other than to stall the main event loop while styling is happening (as current browsers do). But because CSS is largely separated from JS, we can just run it off the main thread and allow JavaScript to run uninterrupted by layout.
yogo 13y ago
> just slowly reinvents everything Yep. Not sure why they didn't just copy WPF or even Android's way years ago.
dragonwriter 13y ago
> How about just make Javascript frigging fast so everyone can code their own layout system? Because separating content (HTML) from layout (CSS) from behavior (JS) is a good thing, and because, particularly, being able to have content work without layout or behavior (for situations where you just need the content), and to have content and layout work without behavior (for situations where you just need static presentation) are important.

AshleysBrain 13y ago

Is there any non-video documentation? I find videos painfully slow compared to scrolling through some quick actual code examples side-by-side with results.

paxtonab 13y ago
http://www.w3.org/TR/css-grid-1/ http://www.w3.org/TR/css-grid-1/

kendalk 13y ago

Prediction: Sometime in 2018 we will have a thread: "Ask HN: Is it finally time to use CSS grids?"

SideburnsOfDoom 13y ago
Prediction: The response will be "not until Firefox supports it".

paxtonab 13y ago

Is this an attempt to standardize the grid layouts that everyone has to either build themselves or use a framework like bootstrap for?

vegustui 13y ago
This is way better.

mitchtbaum 13y ago

If future browsers include default grid display systems, then [YUI's PureCSS Grid Library](0) is a modern-backwards compatability layer. It seems even to have a "leave no browser behind" philosophy, because you can generate usable output for even IE 6 & 7. [YUI Open Roundtable - Pure CSS with Tilo Mitra and Eric Ferraiuolo](1) is widely informative with amazing demos of each of the latest tools involved. The docs are split across http://stage.purecss.io/grids/ http://stage.purecss.io/grids/ and http://yuilibrary.com/yui/docs/cssgrids/ http://yuilibrary.com/yui/docs/cssgrids/ ; overall, they're sweet and concise. 0: http://purecss.io/grids/ http://purecss.io/grids/ 1: https://www.youtube.com/watch?v=t4w3e-JRXy0 https://www.youtube.com/watch?v=t4w3e-JRXy0

applecore 13y ago

Is there a JS library/framework that lets me use this now?

andybak 13y ago
Google for css grids polyfill.

vegustui 13y ago

CSS grid is what CSS should have been from the beginning.

keeperofdakeys 13y ago

For 95% of what people want this for, CSS tables would probably work just as well ("display: table" ). The main advantage of this seems to be the "minmax" ability, and some rethinking of the api, since CSS tables are semantically based on HTML tables.