3 ms·

And the reason to use this over built-in CSS grids is...

thinkloop 8y ago
This should have definitely been addressed in the readme
jtmarmon 8y ago
Looks like it's addressed here: https://codeburst.io/magic-grid-f8e2221e7cef https://codeburst.io/magic-grid-f8e2221e7cef
e-oj 8y ago
When the components in a grid have different heights, a single longer or shorter component stretches the whole row or leaves unpleasant whitespace at the bottom.
- zanny 8y ago
  You can use auto-flow: dense to have the grid backfill gaps. I haven't had much chance to test its limits cross browser yet though but trivial examples have worked for me so far. It isn't as optimal a layout system as you can get with javascript but generally so long as all elements are at least half the height of other members of a row it doesn't look offensively bad. And there is room for more sophisticated layout algorithms in the future. And it generally isn't that hard to pad grid items to be multiples of a common height so they can organically fill consistently.
jahbrewski 8y ago
+1 - I recently went looking for a CSS framework (I was still in the “Bootstrap” mindset), and ultimately decided on vanilla CSS grid + flexbox. If anyone is looking for a resource to learn CSS grid, I highly recommend Grid Garden: http://cssgridgarden.com/ http://cssgridgarden.com/
- PavlovsCat 8y ago
  That is awesome. Did you see this in the footer? https://flexboxfroggy.com/ https://flexboxfroggy.com/
- dfa1234 8y ago
  I just started this tutorial. Thats is a "why", not a "how"... So maybe I can ask here. Why grid-column start include the value and grid column end exclude it... In fact where there is a ressource for understanding css logic on the internet?
  - kilburn 8y ago
    > Why grid-column start include the value and grid column end exclude it All CSS grid properties are defined in terms of grid "lines", not cells. If you have a grid of 2x2 cells, there are actually 3 vertical lines and 3 horizontal lines: 1 2 3 1 ┌─┬─┐ 2 ├─┼─┤ 3 └─┴─┘ "grid-column-start: x" means "this area starts the x vertical line" "grid-column-end: y" means "this area ends at the y vertical line" As you can see, there is no possible ambiguity here on whether you mean "inclusive" or "exclusive" like there would be if you referred to cells (which is why you had this question). That's the reason they chose to go with the "lines" model. > In fact where there is a ressource for understanding css logic on the internet? Usually each CSS spec has a rationale and some introduction to the "why" and the "thinking model" of the spec. For CSS grid you may look at [1]. [1] https://www.w3.org/TR/css-grid-1/#grid-concepts https://www.w3.org/TR/css-grid-1/#grid-concepts
- quickthrower2 8y ago
  And I guess you can polyfill that back to IE etc.

This should have definitely been addressed in the readme

Looks like it's addressed here: https://codeburst.io/magic-grid-f8e2221e7cef https://codeburst.io/magic-grid-f8e2221e7cef

e-oj 8y ago

When the components in a grid have different heights, a single longer or shorter component stretches the whole row or leaves unpleasant whitespace at the bottom.

zanny 8y ago
You can use auto-flow: dense to have the grid backfill gaps. I haven't had much chance to test its limits cross browser yet though but trivial examples have worked for me so far. It isn't as optimal a layout system as you can get with javascript but generally so long as all elements are at least half the height of other members of a row it doesn't look offensively bad. And there is room for more sophisticated layout algorithms in the future. And it generally isn't that hard to pad grid items to be multiples of a common height so they can organically fill consistently.

jahbrewski 8y ago

+1 - I recently went looking for a CSS framework (I was still in the “Bootstrap” mindset), and ultimately decided on vanilla CSS grid + flexbox. If anyone is looking for a resource to learn CSS grid, I highly recommend Grid Garden: http://cssgridgarden.com/ http://cssgridgarden.com/

PavlovsCat 8y ago
That is awesome. Did you see this in the footer? https://flexboxfroggy.com/ https://flexboxfroggy.com/
dfa1234 8y ago
I just started this tutorial. Thats is a "why", not a "how"... So maybe I can ask here. Why grid-column start include the value and grid column end exclude it... In fact where there is a ressource for understanding css logic on the internet?
- kilburn 8y ago
  > Why grid-column start include the value and grid column end exclude it All CSS grid properties are defined in terms of grid "lines", not cells. If you have a grid of 2x2 cells, there are actually 3 vertical lines and 3 horizontal lines: 1 2 3 1 ┌─┬─┐ 2 ├─┼─┤ 3 └─┴─┘ "grid-column-start: x" means "this area starts the x vertical line" "grid-column-end: y" means "this area ends at the y vertical line" As you can see, there is no possible ambiguity here on whether you mean "inclusive" or "exclusive" like there would be if you referred to cells (which is why you had this question). That's the reason they chose to go with the "lines" model. > In fact where there is a ressource for understanding css logic on the internet? Usually each CSS spec has a rationale and some introduction to the "why" and the "thinking model" of the spec. For CSS grid you may look at [1]. [1] https://www.w3.org/TR/css-grid-1/#grid-concepts https://www.w3.org/TR/css-grid-1/#grid-concepts
quickthrower2 8y ago
And I guess you can polyfill that back to IE etc.