grid-item-sizing-percent-002-ref.html (7510B)
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: grid; 16 position: relative; 17 float: left; 18 background-color: grey; 19 grid-template-columns: 50px 100px; 20 justify-items: start; 21 align-items: start; 22 clear: both; 23 } 24 25 .item { 26 background: pink; 27 grid-area: 1 / 1 / 2 / 2; 28 background-clip: content-box; 29 min-width: 0; 30 min-height: 0; 31 z-index: 1; 32 } 33 .c1 { 34 width: 60px; 35 height: 60%; 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-width: 25px; } 46 .minw .item { min-width: 25px; } 47 .maxw .c1.item { max-width: 75px; } 48 .minw .c1.item { min-width: 75px; } 49 .maxw .c2.item { max-width: 75px; } 50 .minw .c2.item { min-width: 75px; } 51 52 .p { padding:3px 5px 10% 10px; } 53 .c1.p, .c2.p { padding:3px 5px 10% 30px; } 54 .m { margin:3px 5px 10% 5px; } 55 .c1.m, .c2.m { margin:3px 5px 10% 15px; } 56 .b { border:solid black; } 57 58 x { display:inline-block; width:10px; height:4px; background: silver; } 59 60 a { 61 grid-area: 1 / 1 / 2 / 2; 62 width:100%; height:100%; 63 background: blue; 64 } 65 </style> 66 </head> 67 <body> 68 69 <div style="float:left"> 70 <div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> 71 <div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> 72 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> 73 <div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> 74 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> 75 <div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> 76 <div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> 77 <div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> 78 <div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> 79 </div> 80 81 <div style="float:left" class="maxw"> 82 <div class="grid" style="grid-template-rows:calc(8px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> 83 <div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> 84 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> 85 <div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> 86 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> 87 <div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> 88 <div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> 89 <div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> 90 <div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> 91 </div> 92 93 <div style="float:left" class="minw"> 94 <div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> 95 <div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> 96 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> 97 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> 98 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> 99 <div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> 100 <div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> 101 <div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> 102 <div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> 103 </div> 104 105 <div style="float:left"> 106 <div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> 107 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> 108 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> 109 <div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> 110 <div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> 111 <div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> 112 </div> 113 114 <br clear="all"> 115 116 <div style="float:left" class="maxw"> 117 <div class="grid" style="grid-template-rows:calc(11px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> 118 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> 119 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> 120 <div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> 121 <div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> 122 <div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> 123 </div> 124 125 <div style="float:left" class="minw"> 126 <div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> 127 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> 128 <div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> 129 <div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> 130 <div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> 131 <div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> 132 </div> 133 134 135 </body> 136 </html>