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

Gaps are just like additional tracks. So it's like you had `50fr 10px 25fr 10px 25fr`.

The grid algorithm can't know that you actually want the `50fr` to be as big as `25fr + 10px + 25fr` in order to have the 1st gap centered at 50%.

> If I set a grid to be 50fr, I would expect that it would take up 50% of the space of the grid (minus any evenly aligned gaps).

This is exactly what happens. `50fr` is like `(100% - 2*10px)/2`, and `25fr` is like `(100% - 2*10px)/4`. So the sum of `50fr + 25fr + 25fr` is like `100% - 20px` which is the total space minus the gaps.

You can use something like

```css
grid-template-rows: calc(50% - 5px) calc(25% - 10px) calc(25% - 5px);
```

Then the 1st gap will be centered at 50%, and the 2nd gap at 75%, but the 2nd and 3rd tracks will have different sizes.

Alternatively, consider having an even number of tracks:

```css
.app {
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "a a b c";
}
.cell1 { grid-column: a; }
.cell2 { grid-column: b; }
.cell3 { grid-column: c; }
```

For `1020px`, this will be like `a:505px | gap:10px | b:247.5px | gap:10px | c:247.5px` (but the 2nd gap will not be at 75%).

-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7197#issuecomment-1088848437 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 15:14:44 UTC