NeutronCSS/neutroncss

Grid (2,1) with margin error

Opened this issue · 0 comments

I guess i found a bug in the calculation, or i don't get it how to use it the right way. :-)

I have two grids: One has two columns (not even), the other has three columns (even).

This looks good:
First grid: columns((2,1))
Second grid: columns(3)

By "looking good" im mean that the first column of the first grid ends there, where the second column of the second grid ends.

An now this looks not as expected:
First grid: columns((2,1), $margin:1em)
Second grid: columns(3, $margin:1em)

The first column of the first grid is short than expected, the second column on the first grid ist longer than expected.
I figured out that two +0.5em in the calculation of the width property on both columns are the problem. I guess 0.5em are there, because we have two columns. But for the math in this case we have three instead of two columns because i use columns((2,1), $margin:1em).

Applying this overwrite was a quick fix for me, but i guess the calculation has to be updated. Or eventually i don't get it. :-)

// fix
/**/
& >:nth-child(2n+1) {
    width: calc(66.6666% - 1em - 1em + .66666em + .66666em);
}
& >:nth-child(2n+2) {
    width: calc(33.33333% - 1em - 1em + .33333em + .333333em);
}
/**/

Thanks.