grid-layout-auto-tracks-ref.html (937B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid Layout Reference</title> 5 <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> 6 <style> 7 body { 8 margin: 0; 9 padding: 0; 10 border: 0 none; 11 } 12 #caseTitle { 13 margin: 10px; 14 height: 40px; 15 } 16 #grid { 17 margin: 0; 18 width: 300px; 19 } 20 .a { 21 background: blue; 22 width: 100px; 23 float: left; 24 } 25 .b { 26 background: yellow; 27 width: 50px; 28 float: left; 29 } 30 .c { 31 background: pink; 32 width: 100px; 33 clear: both; 34 float: left; 35 } 36 </style> 37 </head> 38 <body> 39 <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> 40 <div id="grid"> 41 <div class="a"> </div> 42 <div class="b"> </div> 43 <div class="c"> </div> 44 </div> 45 </body> 46 </html>