Re: [csswg-drafts] [css-grid] Percentages and intrinsic size

This is the code for back-computing percentage grid-gaps in Gecko:

Assume the grid-gap is calc(Apx + B%) and we have N gaps,
then we calculate the intrinsic size (Size) as:
1. let Size = sum all track lengths
2. add Apx * N to Size
3. let Percent = B% * N
4. if Size or Percent is negative goto 7
5. if Percent >= 100% then let Size = "infinity", goto 7
6. let Size = Size / (100% - Percent)
7. if Size is negative let Size be zero

(A or B may be a negative number)

Percentage grid-gaps also affect how we calculate the number of
repeat auto-fill/fit tracks (when the size is auto), that code lives here:
it's basically the same algorithm as above, repeated in a loop
with N=1, N=2 etc until the min/max are satisfied.

All of the above is symmetrical in both axes.

Note that once the intrinsic size is known it is treated as
a definite percentage basis, so for example:

.grid {
  display: inline-grid;
  grid: repeat(2,20px) / repeat(2,20px);
  grid-gap:calc(10px - 10%);
The content area size of the grid is 50px x 50px, so the final grid-gap
is 10px - (0.1 * 50px) = 5px, which results in a 5px empty space at
the end of the grid.

However, "grid-gap:calc(10px - 50%)" would make the grid-gap negative
so we clamp that to zero.

Some [testcases]( for the above.

[Rendering in Firefox](

(BTW, I'm not claiming our handling of a negative percentage part in calc() is ideal -
I just wanted to document what we're currently doing.)

GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at using your GitHub account

Received on Thursday, 19 October 2017 02:21:58 UTC