267525 2024-01-15 01:11:20 -0800 CSS grid (auto-fit) combined with container-type does not work 2025-06-16 00:08:51 -0700 1 1 1 Unclassified WebKit CSS Safari 17 All All RESOLVED CONFIGURATION CHANGED https://jsfiddle.net/e6rnamw7/1/ BrowserCompat, InRadar P3 Major --- 1 rezi99 webkit-unassigned ahmad.saleem792 karlcow koivisto miriam obrufau rego sgill26 simon.fraser webkit-bug-importer zalan oldest_to_newest 2005029 0 rezi99 2024-01-15 01:11:20 -0800 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> 2005447 1 obrufau 2024-01-16 16:46:57 -0800 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. 2006495 2 webkit-bug-importer 2024-01-22 01:12:14 -0800 <rdar://problem/121359523> 2123895 3 ahmad.saleem792 2025-06-16 00:08:51 -0700 It works fine now on Safari Technology Preview 221.