Skip to content

Grid (2,1) with margin error #58

@sascha53

Description

@sascha53

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions