Bug 267525 - CSS grid (auto-fit) combined with container-type does not work
Summary: CSS grid (auto-fit) combined with container-type does not work
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: All All
: P3 Major
Assignee: Nobody
URL: https://jsfiddle.net/e6rnamw7/1/
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-01-15 01:11 PST by Rezi
Modified: 2024-01-22 01:12 PST (History)
8 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Rezi 2024-01-15 01:11:20 PST
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>
Comment 1 Oriol Brufau 2024-01-16 16:46:57 PST
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.
Comment 2 Radar WebKit Bug Importer 2024-01-22 01:12:14 PST
<rdar://problem/121359523>