Skip to content

Grid (2,1) with margin error #58

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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