Closed Bug 1359060 Opened 6 years ago Closed 6 years ago

[css-grid] fit-content unexpectedly reserves space for full clamp size in repeat()


(Core :: CSS Parsing and Computation, defect)

53 Branch
Not set



Tracking Status
firefox55 --- fixed


(Reporter: jonathan.snook, Assigned: MatsPalmgren_bugz)



(Keywords: testcase)


(2 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20170413192749

Steps to reproduce:

Created grid layout using the following CSS:

#container {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(400px));

and the following HTML:
<div id="container">
  <div>Text A</div>
  <div>Text B</div>
  <div>Text C</div>
  <div>Text D</div>

Actual results:

Once the container is sized below 1600px, the grid items start flowing into subsequent rows.

Expected results:

Since each container's content is well below the clamp size of 400px, I expected all grid items to remain on the same row until the container was sized below total actual size of all items. (In my case, it was approximately 172px wide.)
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Attached file Reporter's testcase
Assignee: nobody → mats
According to the CSS Grid spec, grid-template-columns: repeat(auto-fit, fit-content(400px))
is actually invalid, because <fixed-size> doesn't include fit-content():
"repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )"
"<fixed-size> = <fixed-breadth> | 
                minmax( <fixed-breadth> , <track-breadth> ) | 
                minmax( <inflexible-breadth> , <fixed-breadth> )"

It looks like Chrome (correctly) rejects this declaration as invalid.

IIRC, we implemented fit-content() (in bug 1281320) before the spec had a clear definition of
what sizes were allowed in an auto-repeat track size, so currently we interpret 400px as
a "definite track max size" and use that to calculate how many tracks to create.
This is probably not a very useful behavior, so I'll just fix this by rejecting
these values.  But feel free to open a spec issue at
if you want to argue for a spec change (please put [css-grid] first in the title).
Blocks: 1281320
Severity: normal → minor
Ever confirmed: true
Keywords: testcase
OS: Unspecified → All
Hardware: Unspecified → All
Summary: fit-content unexpectedly reserves space for full clamp size in repeat() → [css-grid] fit-content unexpectedly reserves space for full clamp size in repeat()
Actually, after re-reading bug 1281320 and its patch, I think this is just a case that
we missed to reject somehow.  My bad.  Anyway, it's a pretty simple fix...
Comment on attachment 8862799 [details] [diff] [review]

Review of attachment 8862799 [details] [diff] [review]:


(Consider adding ", per spec" to the end of the commit message, in the spirit of bz's recent dev.platform post about commit message best-practices. ('The commit message should describe not just the "what" of the change but also the "why".')
Attachment #8862799 - Flags: review?(dholbert) → review+
Pushed by
[css-grid] Disallow fit-content() in repeat(auto-fill/fit) track sizes (per the CSS Grid spec).  r=dholbert
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
You need to log in before you can comment on or make changes to this bug.