grid-item-sizing-percent-001.html (3050B)
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 <title>CSS Test: Testing grid item percent sizes</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435"> 9 <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> 10 <link rel="match" href="grid-item-sizing-percent-001-ref.html"> 11 <meta charset="utf-8"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 position:relative; 18 background-color: grey; 19 grid-template-columns: 50px 100px; 20 grid-template-rows: 20px 30px; 21 width: 173px; 22 height: 53px; 23 justify-items: start; 24 align-items: start; 25 } 26 27 .item { 28 width: 100%; 29 height: 100%; 30 background: lime; 31 grid-area: 1 / 1 / 2 / 2; 32 background-clip: content-box; 33 min-width: 0; 34 min-height: 0; 35 } 36 .c1 { 37 width: 40%; 38 height: 60%; 39 grid-area: 1 / 1 / 3 / 3; 40 } 41 .c2 { 42 grid-area: 1 / 1 / 3 / 3; 43 } 44 #abs > div div { 45 position: absolute; 46 } 47 .pbox { 48 box-sizing: border-box; 49 } 50 51 .p { padding:4% 6%; } 52 .m { margin:4% 6%; } 53 .b { border:solid black; } 54 55 </style> 56 </head> 57 <body> 58 59 <div style="float:left"> 60 <div class="grid"><div class="item"></div></div> 61 <div class="grid"><div class="item pbox p"></div></div> 62 <div class="grid"><div class="item c1 p"></div></div> 63 <div class="grid"><div class="item c1 pbox p"></div></div> 64 <div class="grid"><div class="item c2 pbox p"></div></div> 65 <div class="grid"><div class="item pbox b"></div></div> 66 <div class="grid"><div class="item pbox p b"></div></div> 67 <div class="grid"><div class="item c1 pbox p b"></div></div> 68 <div class="grid"><div class="item c2 pbox p b"></div></div> 69 <div class="grid"><div class="item pbox m"></div></div> 70 <div class="grid"><div class="item c1 pbox m"></div></div> 71 <div class="grid"><div class="item c2 pbox m"></div></div> 72 <div class="grid"><div class="item pbox p m"></div></div> 73 <div class="grid"><div class="item pbox p b m"></div></div> 74 <div class="grid"><div class="item c2 pbox p b m"></div></div> 75 </div> 76 77 <div id="abs" style="float:left"> 78 <div class="grid"><div class="item"></div></div> 79 <div class="grid"><div class="item pbox p"></div></div> 80 <div class="grid"><div class="item c1 p"></div></div> 81 <div class="grid"><div class="item c1 pbox p"></div></div> 82 <div class="grid"><div class="item c2 pbox p"></div></div> 83 <div class="grid"><div class="item pbox b"></div></div> 84 <div class="grid"><div class="item pbox p b"></div></div> 85 <div class="grid"><div class="item c1 pbox p b"></div></div> 86 <div class="grid"><div class="item c2 pbox p b"></div></div> 87 <div class="grid"><div class="item pbox m"></div></div> 88 <div class="grid"><div class="item c1 pbox m"></div></div> 89 <div class="grid"><div class="item c2 pbox m"></div></div> 90 <div class="grid"><div class="item pbox p m"></div></div> 91 <div class="grid"><div class="item pbox p b m"></div></div> 92 <div class="grid"><div class="item c2 pbox p b m"></div></div> 93 </div> 94 95 </body> 96 </html>