grid-layout-grid-in-grid-ref.html (1543B)
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 height: 150px; 19 width: 150px; 20 background: yellow; 21 position: relative; 22 } 23 .a { 24 background: blue; 25 height: 100px; 26 width: 50px; 27 position: absolute; 28 top: 0; 29 left: 0; 30 } 31 .b1 { 32 background: orange; 33 width: 50px; 34 height: 50px; 35 position: absolute; 36 top: 0; 37 left: 50px; 38 } 39 .b2 { 40 background: cyan; 41 width: 50px; 42 height: 50px; 43 position: absolute; 44 top: 50px; 45 left: 100px; 46 } 47 .c { 48 background: pink; 49 width: 100px; 50 height: 50px; 51 position: absolute; 52 top: 100px; 53 left: 50px; 54 } 55 .d { 56 background: #eee; 57 width: 50px; 58 height: 50px; 59 position: absolute; 60 top: 100px; 61 left: 0 62 } 63 </style> 64 </head> 65 <body> 66 <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> 67 <div id="grid"> 68 <div class="a"></div> 69 70 <div class="b1"></div> 71 <div class="b2"></div> 72 <div class="c"></div> 73 <div class="d"></div> 74 </div> 75 </body> 76 </html>