Re: [csswg-drafts] [css-grid-1] Unpredicable gap positioning with two or more tracks. (#7197)

I gave your testcase a quick analysis and everything appears to be working as per the specification.  The steps for laying out the grid cells are as follows:

1. Determine the number of gaps and the total of their width.  Here, because there are two gaps and you set a gap of 10px, that’s 20px.
2. Subtract that total from the width of the grid container (`.app`).  If the container is 1020px wide, that leaves 1000px, which I of course picked to make the rest of the math easy for myself.
3. Divide that remaining width by the total of the `fr` values (100) to get the value of 1fr (10px).
4. Multiply that amount by the number of fr per element.  Here, that give us 500px, 250px, and 250px.
5. Lay the elements and gaps out: 500px, 10px, 250px, 10px, 250px.

This is what happens in your testcase.  So the left and right edges of the grid components are:

1. `.cell1`: 0px, 500px
2. first gap: 500px, 510px
3. `.cell2`: 510px, 760px
4. second gap: 760px, 770px
5. `.cell3`: 770px, 1020px

The dividers, on the other hand, are primarily placed using percentage positioning.  So the first is placed at 50% - 1px, which is 510px - 1px (remember, the container is 1020px wide in my example).  That places it at 509px, or its center at 510px, which is right where the first cell and gap meet.  The second divider is at 75% - 1px, which is 765px - 1px.  That places its left edge at 764px and its center at 765px, which happens to fall just in the middle of the second gap.

Essentially, your `calc()` statements don’t take the details of grid layout into account, so one of them is off.  If you turned the second divider around so its position was calculated from the right side (`right: 25% - 1px`) instead of the left, they’d both be off.  I was able to make your layout work as intended by changing the first divider’s CSS to `left: calc(50% - 6px)`, where the 6px is 1px plus half the gap width (times the number of gaps to its right, which is this case was 1).

What you most likely really want is the ability to just set borders on grid items, or else decorations in gaps, rather than having to calculate their positions yourself.  These have been (are being) discussed, but as far as I know haven’t yet moved to the stage of being implemented.

-- 
GitHub Notification of comment by meyerweb
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7197#issuecomment-1088718982 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 5 April 2022 13:41:30 UTC