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.