Bug 267525 – CSS grid (auto-fit) combined with container-type does not work

• Status: NEW
• Component: CSS

[Rezi]

When element with container query has grid template columns set to auto-fit, the grid is totally ignored and all child elements are stack on top of each other (similar to: width:0; position absolute; top:0; left:0)

replication: https://jsfiddle.net/e6rnamw7/1/

example 

CSS
----------------------------

.wrap{	
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  container-type: inline-size;
}

.item {
  border:1px solid black;
}


HTML
----------------------------

  <div class="wrap">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum, a, maxime, necessitatibus aliquid enim tenetur porro ex delectus odit minima itaque dolores, beatae dolore. Asperiores odit, aspernatur quaerat expedita!</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum, a, maxime, necessitatibus aliquid enim tenetur porro ex delectus odit minima itaque dolores, beatae dolore. Asperiores odit, aspernatur quaerat expedita!</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum, a, maxime, necessitatibus aliquid enim tenetur porro ex delectus odit minima itaque dolores, beatae dolore. Asperiores odit, aspernatur quaerat expedita!</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum, a, maxime, necessitatibus aliquid enim tenetur porro ex delectus odit minima itaque dolores, beatae dolore. Asperiores odit, aspernatur quaerat expedita!</div>
  </div>

[Oriol Brufau]

https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fit

> The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed.

It seems that WebKit understands this as having to collapse the tracks when there is size containment.

I don't recall the details of the interaction of size containment with grid, but I guess the tracks should only collapse during intrinsic sizing, not when laying out for real.

You can see this in Blink, use `display: inline-grid; border: 10px solid magenta` on the grid. The grid is 0px wide when using auto-fit, and 150px wide when using auto-fill. But in both cases the column is 150px wide.

[Radar WebKit Bug Importer]

<rdar://problem/121359523>