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