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