grid-auto-repeat-multiple-values-001.html (1411B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Grid Layout Test: Auto Repaeat with Multiple Tracks and Gutters</title> 7 <link rel="author" title="Yu Shen" href="shenyu.tcv@gmail.com"> 8 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation"> 9 <link rel="match" href="../reference/grid-auto-repeat-multiple-values-001-ref.html"> 10 <style> 11 .grid-container { 12 display: grid; 13 border: solid thick; 14 margin: 10px; 15 } 16 17 .columns { 18 grid-template-columns: repeat(auto-fill, 50px 50px); 19 grid-auto-rows: 25px; 20 grid-column-gap: 100px; 21 width: 300px; 22 } 23 24 .rows { 25 grid-auto-flow: column; 26 grid-template-rows: repeat(auto-fill, 50px 50px); 27 grid-auto-columns: 25px; 28 grid-row-gap: 100px; 29 width: min-content; 30 height: 300px; 31 } 32 33 .grid-container>div { 34 background: lime; 35 } 36 </style> 37 </head> 38 39 <body> 40 <p>The test passes if it has the same visual effect as reference.</p> 41 <div class="grid-container columns"> 42 <div></div> 43 <div></div> 44 <div></div> 45 <div></div> 46 </div> 47 <div class="grid-container rows"> 48 <div></div> 49 <div></div> 50 <div></div> 51 <div></div> 52 </div> 53 </body> 54 55 </html>