Bug 282326 – Grid breaks when using auto-fit if the element is also a container

• Status: NEW
• Component: CSS

Created attachment 473077 [details]
Image with grid inspector on, showing the issue with grid-auto-fit, and comparing it to auto-fill

When an element uses Grid's auto-fit and also has a `container-type: size` or `container-type: inline-size`, it breaks the grid.
The columns become 0px in width, and it also creates an incorrect number of columns.

The following should create columns with a minimum width of 100px, but instead, it creates columns that are 0px in width.

.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  container-type: inline-size;
}

As for the number of columns, it matches how many would be created if using `auto-fill` instead. For example, if `auto-fill` would create 10 columns, `auto-fill` also results in 10 columns (though now 0px in width), even if there are only three children.

Both Chromium browsers and Firefox behave as expected, this issue is only in Safari.

I've attached an image of the issue, and a live example of the issue can be found here: https://codepen.io/kevinpowell/pen/yLmjyYp

[Miriam Suzanne]

We have also run into this a few times recently. Grid-items are a central use-case for container queries.

[Radar WebKit Bug Importer]

<rdar://problem/139350671>

Created attachment 473431 [details]
Is it Possible to make in center?