grid-repeat-max-width-001.html (1826B)
1 <!doctype html> 2 <title>Grid repeat(auto) with max-width shouldn't pay attention only to that</title> 3 <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-repeat"> 5 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 6 <!-- 7 The auto-repeat section says to calculate how many repetitions fill the grid container's content area 8 when the grid has a definite width or max-width. 9 It does *not* say to *use* the grid container's width/max-width, necessarily; 10 it should still depend on normal layout. 11 12 This test will render correctly if the actual laid-out width of the grid container is used 13 to calculate the number of repetitions 14 (resulting in a single columns), 15 but will fail if the max-width is used 16 (resulting in the grid container assuming that there will be two columns while sizing itself, 17 but then only using one column when actually laying out its contents). 18 --> 19 <style> 20 .wrapper { 21 width: 190px; 22 display: grid; 23 justify-content: start; 24 } 25 .grid { 26 max-width: 200px; 27 display: grid; 28 grid-template-columns: repeat(auto-fit, minmax(0, 100px)); 29 background: red; 30 } 31 .item { 32 background: green; 33 width: 100px; 34 height: 50px; 35 } 36 </style> 37 <p>Test passes if there is a filled green square.</p> 38 <div class=wrapper> 39 <div class=grid> 40 <div class=item></div> 41 <div class=item></div> 42 </div> 43 </div> 44 45 <script> 46 let grid = document.getElementsByClassName("grid")[0]; 47 // Force a layout. 48 grid.offsetLeft = grid.offsetLeft; 49 if (window.getComputedStyle(grid).gridTemplateColumns === "100px") { 50 // Test passes - only one repeat of 100px was computed. 51 grid.style.width = "min-content"; 52 } 53 </script>