grid-support-grid-auto-columns-rows-001-ref.html (1331B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title> 6 <link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/> 7 <style> 8 #grid { 9 position: relative; 10 } 11 .position { 12 position: absolute; 13 top: 0; 14 left: 0; 15 } 16 #first-column-first-row { 17 width: 30px; 18 height: 30px; 19 background-color: purple; 20 } 21 #third-column-first-and-second-rows { 22 left: 60px; 23 width: 30px; 24 height: 60px; 25 background-color: orange 26 } 27 #first-and-second-columns-second-row { 28 top: 30px; 29 width: 60px; 30 height: 30px; 31 background-color: blue; 32 } 33 </style> 34 </head> 35 <body> 36 <p>The test passes if it has the same visual effect as reference.</p> 37 <div id="grid"> 38 <div class="position" id="first-column-first-row"></div> 39 <div class="position" id="third-column-first-and-second-rows"></div> 40 <div class="position" id="first-and-second-columns-second-row"></div> 41 </div> 42 </body> 43 </html>