3 ms·

Firefox is the first major browser to support CSS Grids out of the box. https://developers.google.com/web/updates/2017/01/css-grid https://developers.google.co

by jwarren 10y ago

Firefox is the first major browser to support CSS Grids out of the box. https://developers.google.com/web/updates/2017/01/css-grid https://developers.google.com/web/updates/2017/01/css-grid is a simple introduction to it. http://gridbyexample.com/ http://gridbyexample.com/ is probably the best reference site. https://tympanus.net/codrops/css_reference/grid/ 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/ http://igalia.github.io/css-grid-layout/ Some lovely creative examples from Mozilla's Jen Simmons: http://labs.jensimmons.com/ http://labs.jensimmons.com/ http://labs.jensimmons.com/2016/ http://labs.jensimmons.com/2016/

nachtigall 10y ago
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-highlighter-now-in-firefox-developer-edition/ https://hacks.mozilla.org/2016/12/css-grid-and-grid-highligh... Well done, new feature coming along with Devtools for it.
gsnedders 10y ago
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.
hubert123 10y ago
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.
marc_omorain 10y ago
What's the difference between grids and flexbox? To the untrained eye, they look like two alternate layout systems where one should suffice.
- Sammi 10y ago
  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.
- lloeki 10y ago
  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.
  - Nition 10y ago
    Does this mean we're finally coming full circle after all these years back to Tables for layout?
    - saidajigumi 10y ago
      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.
    - nimchimpsky 10y ago
      some of us never left
- rachelandrew 10y ago
  I wrote up an explanation here: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-...
  - Esau 10y ago

by jwarren 10y ago

nachtigall 10y ago

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-highlighter-now-in-firefox-developer-edition/ https://hacks.mozilla.org/2016/12/css-grid-and-grid-highligh... Well done, new feature coming along with Devtools for it.

gsnedders 10y ago

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.

hubert123 10y ago

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.

marc_omorain 10y ago

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

Sammi 10y ago
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.
lloeki 10y ago
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.
- Nition 10y ago
  Does this mean we're finally coming full circle after all these years back to Tables for layout?
  - saidajigumi 10y ago
    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.
  - nimchimpsky 10y ago
    some of us never left
rachelandrew 10y ago
I wrote up an explanation here: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-...
- Esau 10y ago