column-auto-repeat-016.html (1150B)
1 <!DOCTYPE html> 2 <html> 3 <title>Auto repeat tracks with fixed size</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 5 <link rel="match" href="column-auto-repeat-016-ref.html"> 6 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 7 <style> 8 .grid-lanes { 9 display: grid-lanes; 10 background: gray; 11 flow-tolerance: 0; 12 grid-template-columns: repeat(auto-fit, 100px); 13 height: 300px; 14 } 15 16 .grid-lanes > div { 17 width: 100%; 18 height: 100px; 19 } 20 </style> 21 <body> 22 <div class="grid-lanes"> 23 <div style="background: lightskyblue;"> 24 Number 1 25 </div> 26 <div style="background: lightcoral;"> 27 Number 2 28 </div> 29 <div style="background: lightgreen;"> 30 Number 3 31 </div> 32 <div style="background: lightpink;"> 33 Number 4 34 </div> 35 <div style="background: orange;"> 36 Number 5 37 </div> 38 <div style="grid-column: span 2; background: brown;"> 39 Number 6 40 </div> 41 <div style="grid-column: span 3; background: blue;"> 42 Number 7 43 </div> 44 <div style="grid-column: span 3; background: yellow;"> 45 Number 8 46 </div> 47 </div> 48 </body> 49 </html>