grid-item-sizing-percent-004-ref.html (7159B)
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>Reference: Testing grid item percent sizes</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> 9 <meta charset="utf-8"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 * { vertical-align:top; line-height:4px; } 13 14 .grid { 15 display: inline-grid; 16 position: relative; 17 background-color: grey; 18 grid-template-rows: 50px 100px; 19 justify-items: start; 20 align-items: start; 21 clear: both; 22 } 23 24 .item { 25 background: pink; 26 grid-area: 1 / 1 / 2 / 2; 27 background-clip: content-box; 28 min-width: 0; 29 min-height: 0; 30 z-index: 1; 31 writing-mode: vertical-rl; 32 } 33 .c1 { 34 width: 40%; 35 height: 90px; 36 grid-area: 1 / 1 / 3 / 3; 37 } 38 .c2 { 39 grid-area: 1 / 1 / 3 / 3; 40 } 41 .pbox { 42 box-sizing: border-box; 43 } 44 45 .maxw .item { max-height: 50%; } 46 .minw .item { min-height: 50%; } 47 48 .p { padding:3px 5px 10% 20%; } 49 .m { margin:3px 5px 10% 10%; } 50 .b { border:solid black; } 51 52 x { display:inline-block; width:10px; height:4px; background: silver; } 53 54 a { 55 grid-area: 1 / 1 / 2 / 2; 56 width:100%; height:100%; 57 background: blue; 58 } 59 </style> 60 </head> 61 <body> 62 63 <div style="float:left"> 64 <div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> 65 <div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> 66 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> 67 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> 68 <div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> 69 <div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> 70 <div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> 71 <div class="grid" style="grid-template-columns:0 21px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> 72 <div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> 73 </div> 74 75 <br clear="all"> 76 77 <div style="float:left" class="maxw"> 78 <div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> 79 <div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> 80 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> 81 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> 82 <div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> 83 <div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> 84 <div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> 85 <div class="grid" style="grid-template-columns:0 21px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> 86 <div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> 87 </div> 88 89 <br clear="all"> 90 91 <div style="float:left" class="minw"> 92 <div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> 93 <div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> 94 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> 95 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> 96 <div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> 97 <div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> 98 <div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> 99 <div class="grid" style="grid-template-columns:0 21px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> 100 <div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> 101 </div> 102 103 <div style="float:left"> 104 <div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> 105 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> 106 <div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> 107 <div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> 108 <div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> 109 <div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> 110 </div> 111 112 <br clear="all"> 113 114 <div style="float:left" class="maxw"> 115 <div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> 116 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> 117 <div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> 118 <div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> 119 <div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> 120 <div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> 121 </div> 122 123 <div style="float:left" class="minw"> 124 <div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> 125 <div class="grid" style="grid-template-columns:0 15px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> 126 <div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> 127 <div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> 128 <div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> 129 <div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> 130 </div> 131 132 133 </body> 134 </html>