grid-auto-repeat-multiple-values-001-ref.html (1209B)
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 <style> 9 .match-container { 10 border: solid thick black; 11 position: relative; 12 margin: 10px; 13 } 14 15 .column { 16 width: 300px; 17 } 18 19 .row { 20 width: min-content; 21 height: 300px; 22 } 23 24 .item { 25 background: lime; 26 width: 50px; 27 height: 50px; 28 } 29 30 .column-second { 31 position: absolute; 32 top: 0; 33 left: 150px; 34 } 35 36 .row-second { 37 position: absolute; 38 top: 150px; 39 left: 0px; 40 } 41 </style> 42 </head> 43 44 <body> 45 <p>The test passes if it has the same visual effect as reference.</p> 46 <div class="match-container column"> 47 <div class="item"></div> 48 <div class="item column-second"></div> 49 </div> 50 <div class="match-container row"> 51 <div class="item"></div> 52 <div class="item row-second"></div> 53 </div> 54 </body> 55 56 </html>