grid-track-sizing-001-ref.html (1284B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Test simple track sizing and grid item layout</title> 9 <style> 10 html,body { 11 color:black; background-color:white; font-size:16px; padding:0; margin:0; 12 } 13 span { 14 position: absolute; 15 border: 3px dashed; 16 } 17 span.bg { 18 position: absolute; 19 background: lime; 20 border: 0 none; 21 } 22 #item1 { top: 50px; left: 11px; width: 21px; height: 37px; } 23 #item2 { top: 50px; left: 11px; width: 15px; height: 31px; } 24 #item3 { top: 3px; left: 48px; width: 41px; height: 37px; } 25 #item4 { top: 3px; left: 48px; width: 35px; height: 31px; } 26 #item5 { top: 3px; left: 105px; width: 57px; height: 37px; } 27 #item6 { top: 0px; left: 94px; width: 67px; height: 41px; } 28 #item7 { top: 94px; left: 11px; width: 500px; height: 40px; } 29 #item8 { top: 141px; left: 0px; width: 94px; height: 10px; } 30 </style> 31 </head> 32 <body> 33 <div class="grid"> 34 <span id="item1" class="bg"></span> 35 <span id="item2">1</span> 36 <span id="item3" class="bg"></span> 37 <span id="item4">2</span> 38 <span id="item5" class="bg"></span> 39 <span id="item6">3</span> 40 <span id="item7" class="bg">4</span> 41 <span id="item8" class="bg">5</span> 42 </div> 43 </body> 44 </html>