grid-different-gutters-ref.html (897B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Reference: a square with a green cross</title> 4 <link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> 5 <style> 6 #grid { 7 width:200px; 8 height: 220px; 9 background-color: green; 10 position: relative; 11 } 12 13 #grid > div { 14 background-color: silver; 15 width: 90px; 16 height: 90px; 17 position: absolute; 18 } 19 20 #grid :nth-child(1) { 21 top: 0; 22 left: 0; 23 } 24 25 #grid :nth-child(2) { 26 top: 0; 27 left: 110px; 28 } 29 30 #grid :nth-child(3) { 31 top: 130px; 32 left: 0; 33 } 34 35 #grid :nth-child(4) { 36 top: 130px; 37 left: 110px; 38 } 39 </style> 40 41 <p>The test passes if it has the same visual effect as reference.</p> 42 <div id="grid"> 43 <div></div> 44 <div></div> 45 <div></div> 46 <div></div> 47 </div>