grid-layout-repeat-notation-ref.html (1137B)
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 } 11 #caseTitle { 12 margin: 10px; 13 height: 40px; 14 } 15 #grid { 16 width: 450px; 17 position: relative; 18 } 19 .a { 20 background: blue; 21 width: 100px; 22 float:left 23 } 24 .b { 25 background: yellow; 26 width: 100px; 27 float:left 28 } 29 .c { 30 background: orange; 31 width: 100px; 32 float:left 33 } 34 .d { 35 background: cyan; 36 width: 100px; 37 float:left 38 } 39 .e { 40 background: pink; 41 width: 50px; 42 float:left 43 } 44 </style> 45 </head> 46 <body> 47 <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> 48 <div id="grid"> 49 <div class="a"> </div> 50 <div class="b"> </div> 51 <div class="c"> </div> 52 <div class="d"> </div> 53 <div class="e"> </div> 54 </div> 55 </body> 56 </html>