Repository navigation
[css-grid] I think the gutter math behind cell sizes is broken #563
Description
https://www.w3.org/TR/css-grid-1/
https://codepen.io/corysimmons/pen/vXxpjY?editors=1100
In the 'els per row' example, there is symmetry related to the "correct" (hard to mess up that math) solution. In all other grids, including grid spec, there is no symmetry related to the correct solution.
I understand what grid spec is doing, and it's definitely easier to reason about... but is it right?
Grids were invented to derive functional beauty from math.
Grid spec and all grids don't seem as beautiful as the symmetrical solution.
I want to embrace grid spec when it lands (dat markup), but this seems more important to the designer in me. If it is agreed upon that it's broken, I'm sorry I didn't notice the general problem sooner.
Anxious to hear everyone's thoughts on this...
Activity
MatsPalmgren commentedon Oct 4, 2016
I don't think this math corresponds to how Grid resolves
<flex>sizes:Grid calculates the
<flex>sizes based on the content size subtractedby the grid-gaps. So it's more like:
But CSS doesn't understand that, so you have to do something like this:
corysimmons commentedon Oct 4, 2016
shrug Eh you might be right. I think fr/flex is easier to reason about "7/12 === seven 1/12's".
I still think flex-grow's math is pretty hard to reason about, but grid spec's
spanthing works really well. Excited for its launch. Already have some cool plugins (that don't obfuscate the spec) in mind...