grid-track-percent-sizing-001-ref.html (3917B)
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 <meta charset="utf-8"> 8 <title>Reference: Percent track sizes</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 float: left; 16 border: 3px solid; 17 grid-template-columns: 18px; 18 width: 30px; 19 grid-template-rows: 5px 10px; 20 margin-right: 20px; 21 grid-auto-rows: 10px; 22 align-content: start; 23 justify-content: start; 24 } 25 26 span { 27 background: grey; 28 min-width: 0; 29 min-height: 0; 30 line-height: 0; 31 align-self: start; 32 justify-self: start; 33 } 34 t { 35 display: inline-block; 36 width: 30px; 37 height: 5px; 38 } 39 x { 40 background: lime; 41 min-width: 0; 42 min-height: 0; 43 } 44 45 .tA { 46 grid-template-columns: 30px; 47 width: auto; 48 } 49 .tB { 50 grid-template-columns: 30px; 51 grid-template-rows: 0 10px; 52 } 53 54 .t1 { 55 grid-template-columns: 28px; 56 } 57 .t3, .t4, .t8 { grid: auto 10px / auto; width: auto; } 58 59 .t9 x { width: 18px } 60 .t3 x, .t4 x, .t8 x, .tA x { width: 0 } 61 .t5 x { width: 10px } 62 .tB x { width: 18px } 63 64 .sz { 65 grid-template-rows: 40px; 66 width: 100px; 67 height: 100px; 68 } 69 .sz.t1 { grid-template-rows: 50px; } 70 .sz.t3, .sz.t4 { grid-template-rows: 0; } 71 .sz.t5 { grid-template-rows: 10px; } 72 .sz.t9 { grid-template-rows: 40px 10px; height:100px; } 73 .sz.tA { grid: 0 0 / 0; } 74 .sz.tB { 75 grid-template-columns: 60px; 76 grid-template-rows: 40px; 77 } 78 79 .sz x { width: 60px; } 80 .sz.t1 x { width: 70px; } 81 .sz.t3 x, .sz.t4 x, .sz.t8 x { width: 0 } 82 .sz.t5 x { width: 10px } 83 .sz.tA x { width: 160px } 84 85 .tC { 86 grid-template-columns: 5px; 87 grid-template-rows: 5px; 88 } 89 .tD { 90 grid-template-columns: 0; 91 grid-template-rows: 0; 92 } 93 </style> 94 </head> 95 <body> 96 97 <div class="grid t0" style="height:15px; grid-template-rows:calc(15px * 0.4) 10px"><span><t></t></span><x></x></div> 98 <div class="grid t1" style="height:15px; grid-template-rows:calc(10px + 15px * 0.4) 10px"><span><t></t></span><x></x></div> 99 <div class="grid t2" style="height:15px; grid-template-rows:calc(15px * 0.4) 10px"><span><t></t></span><x></x></div> 100 <div class="grid t3"><span><t></t></span><x></x></div> 101 <div class="grid t4"><span><t></t></span><x></x></div> 102 <div class="grid t5" style="height:15px; grid-template-rows:10px 10px"><span><t></t></span><x></x></div> 103 <div class="grid t6" style="height:15px; grid-template-rows:calc(15px * 0.4) 10px"><span><t></t></span><x></x></div> 104 <div class="grid t7" style="height:15px; grid-template-rows:calc(15px * 0.4) 10px"><span><t></t></span><x></x></div> 105 <div class="grid t8"><span><t></t></span><x></x></div> 106 <div class="grid t9"><span><t></t></span><x></x></div> 107 <div class="grid tA"><span><t></t></span><x></x></div> 108 <div class="grid tD" style="width:0"><span><t></t></span><x></x></div> 109 110 <br clear="all"> 111 112 <div class="grid sz t0"><span><t></t></span><x></x></div> 113 <div class="grid sz t1"><span><t></t></span><x></x></div> 114 <div class="grid sz t2"><span><t></t></span><x></x></div> 115 <div class="grid sz t3"><span><t></t></span><x></x></div> 116 <div class="grid sz t4"><span><t></t></span><x></x></div> 117 <div class="grid sz t5"><span><t></t></span><x></x></div> 118 <div class="grid sz t6"><span><t></t></span><x></x></div> 119 <div class="grid sz t7"><span><t></t></span><x></x></div> 120 <div class="grid sz t8"><span><t></t></span><x></x></div> 121 <div class="grid sz t9"><span><t></t></span><x></x></div> 122 <div class="grid sz tA"><span><t></t></span><x></x></div> 123 <div class="grid sz tB"><span><t></t></span><x></x></div> 124 <div class="grid sz tC"><span><t></t></span><x style="height:10px; width:5px"></x></div> 125 <div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div> 126 <div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div> 127 128 </body> 129 </html>