Hacker News Reader

Comment by jwarren | Hacker News Reader

Firefox is the first major browser to support CSS Grids out of the box.

https://developers.google.com/web/updates/2017/01/css-grid is a simple introduction to it.

http://gridbyexample.com/ is probably the best reference site.

https://tympanus.net/codrops/css_reference/grid/ is another very nice single-page reference.

Some technical examples from Igalia, who have been implementing Grid in Blink and Webkit: http://igalia.github.io/css-grid-layout/

Some lovely creative examples from Mozilla's Jen Simmons:

http://labs.jensimmons.com/

http://labs.jensimmons.com/2016/

View on HN

And the Firefox Devtools now also have an excellent tools for learning, visualizing and debugging CSS Grids: https://hacks.mozilla.org/2016/12/css-grid-and-grid-highligh...

Well done, new feature coming along with Devtools for it.

And we expect Chrome 57 to ship Grid (which should ship around March 14th), Safari 10.1 (part of macOS 10.12.4 and iOS 10.3, expected March/April), and Edge to probably ship it later this year.

What's the difference between grids and flexbox? To the untrained eye, they look like two alternate layout systems where one should suffice.

Flex is only built and meant for handling linier layout, either up and down or left right, and ot does so well with good flexibility and options and developer experience. Or at least compared to the other possible options. It was never intended for making grid layouts, which people are often trying to make it do, because all the other options are so lacking.

Basically grids is a 2D layout system, while flexbox is a 1D constraint system that results in stuff happening on the second dimension. They're complementary and it would be foolish to use one when the other is needed.

Does this mean we're finally coming full circle after all these years back to Tables for layout?

No CSS Grid Layout is far, far more powerful and versatile than tables ever were. Certain significant classes of layout problems that were either a major pain or even outright impossible with current CSS tools are about to become fairly straightforward.

some of us never left

I wrote up an explanation here: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-...

Very nice. Thanks.

Sorry to be so blunt but I dont care about another flexbox that much. What they should have done is to implement the shadowdom. Instead we have to wait another half year for them to get to parity with Chrome.

Reply on news.ycombinator.com