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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions