- From: Mats Palmgren via GitHub <sysbot+gh@w3.org>
- Date: Thu, 19 Oct 2017 02:21:55 +0000
- To: public-css-archive@w3.org

This is the code for back-computing percentage grid-gaps in Gecko: http://searchfox.org/mozilla-central/rev/d0448c970093f94bd986a21d3a9e8c366b316eb4/layout/generic/nsGridContainerFrame.cpp#4768 http://searchfox.org/mozilla-central/rev/d0448c970093f94bd986a21d3a9e8c366b316eb4/layout/base/nsLayoutUtils.h#1484 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: http://searchfox.org/mozilla-central/rev/d0448c970093f94bd986a21d3a9e8c366b316eb4/layout/generic/nsGridContainerFrame.cpp#905 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: ```css .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](https://bugzilla.mozilla.org/attachment.cgi?id=8919970) for the above. [Rendering in Firefox](https://bugzilla.mozilla.org/attachment.cgi?id=8919971). (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 https://github.com/w3c/csswg-drafts/issues/509#issuecomment-337780770 using your GitHub account

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