
Get on the CSS Grid - chrisfarms
http://updates.html5rocks.com/2014/03/Get-on-the-CSS-Grid
======
SideburnsOfDoom
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
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
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
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

------
apaprocki
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-
la...](http://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-layout/)

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

------
Robadob
This seems very similar to Java's gridbag layout manager
([http://docs.oracle.com/javase/tutorial/uiswing/layout/gridba...](http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html))
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
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
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.

------
nobbyclark
So we return to tables ...

~~~
kirkbackus
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.

~~~
SideburnsOfDoom
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
> 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!

~~~
jimmcslim
A comment on the original link stated that 'flexbox is slow', someone
responded with a question; 'is the spec inherently slow or just current
implementations?' but no-one elaborated.

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

~~~
dragonwriter
> 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.

~~~
oneeyedpigeon
I'm curious: how do you feel about css transitions? I'm being totally non-
snarky here, and I fully agree in the ideals of separating the three concerns,
but I sometimes wonder if the existing lines aren't drawn in slightly the
wrong place.

~~~
dragonwriter
Conceptually, I think what they cover fits more into presentation than
behavior, because its how the transition from one state to another is _shown_.
So I don't see CSS transitions as an example of the line being drawn in the
wrong place.

I'm not saying that its always clear cut or that reasonable people can't
disagree on where to draw the line.

------
AshleysBrain
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
[http://www.w3.org/TR/css-grid-1/](http://www.w3.org/TR/css-grid-1/)

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

~~~
SideburnsOfDoom
Prediction: The response will be "not until Firefox supports it".

------
SideburnsOfDoom
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
It seems the what's mostly changed is support. IE10 has it, and Chrome has it
experimentally.

~~~
oneeyedpigeon
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
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/)

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

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

~~~
andybak
Google for css grids polyfill.

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

~~~
vegustui
This is way better.

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

