grid-support-grid-auto-columns-rows-002-ref.html (1684B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties accepting track listing as value</title> 4 <link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> 5 <style> 6 #grid { 7 position: relative; 8 } 9 10 .absolute { 11 position: absolute; 12 top: 0; 13 left: 0; 14 } 15 16 #first-column-first-row { 17 width: 25px; 18 height: 40px; 19 background-color: purple; 20 } 21 22 #second-column-first-row { 23 width: 50px; 24 height: 40px; 25 left: 25px; 26 background-color: orange; 27 } 28 29 #first-column-second-row { 30 width: 25px; 31 height: 30px; 32 top: 40px; 33 background-color: green; 34 } 35 36 #second-column-second-row { 37 width: 50px; 38 height: 30px; 39 top: 40px; 40 left: 25px; 41 background-color: pink; 42 } 43 44 #first-and-second-column-third-row { 45 width: 75px; 46 height: 40px; 47 top: 70px; 48 background-color: silver; 49 } 50 51 #third-column-all-rows { 52 left: 75px; 53 height: 110px; 54 width: 25px; 55 background-color: blue; 56 } 57 </style> 58 59 <p>The test passes if it has the same visual effect as reference.</p> 60 <div id="grid"> 61 <div class="absolute" id="first-column-first-row"></div> 62 <div class="absolute" id="second-column-first-row"></div> 63 <div class="absolute" id="first-column-second-row"></div> 64 <div class="absolute" id="second-column-second-row"></div> 65 <div class="absolute" id="first-and-second-column-third-row"></div> 66 <div class="absolute" id="third-column-all-rows"></div> 67 </div>