grid-percent-grid-gap-001.html (3558B)
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: 'grid-column-gap' percentage</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> 11 <link rel="match" href="grid-percent-grid-gap-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font-size:1px; padding:0; margin:0; 15 } 16 17 .grid { 18 display: grid; 19 grid-template-columns: 30px 30px; 20 border: 1px solid; 21 } 22 23 .inline-grid { 24 display: inline-grid; 25 grid-auto-columns: 160px; 26 grid-auto-rows: 120px; 27 border: 1px solid; 28 } 29 30 .float { float:left; border: 2px solid blue; } 31 32 .percentgap { 33 grid-gap: 20%; 34 } 35 36 .calcgap { 37 grid-gap: calc(12px + 10%) calc(16px + 10%); 38 } 39 40 span:nth-of-type(1) { background: magenta; } 41 span:nth-of-type(2) { background: cyan; } 42 span:nth-of-type(3) { background: yellow; } 43 span:nth-of-type(4) { background: lime; } 44 45 x { 46 display: block; 47 width: 20px; 48 height: 30px; 49 } 50 51 br { clear: both; } 52 </style> 53 </head> 54 <body> 55 56 <div class="inline-grid"> 57 <div class="grid percentgap"> 58 <span><x></x></span> 59 <span><x></x></span> 60 <span><x></x></span> 61 <span><x></x></span> 62 </div> 63 </div> 64 65 <div class="inline-grid" style="grid: auto / auto"> 66 <div class="grid percentgap" style="place-self:start/start; width:160px; height:120px"> 67 <span><x></x></span> 68 <span><x></x></span> 69 <span><x></x></span> 70 <span><x></x></span> 71 </div> 72 </div> 73 74 <div class="float"> 75 <div class="grid percentgap cfill" style="max-width:800%"> 76 <span><x></x></span> 77 <span><x></x></span> 78 <span><x></x></span> 79 <span><x></x></span> 80 </div> 81 </div> 82 83 <div class="inline-grid"> 84 <div class="grid percentgap" style="place-self:start"> 85 <span><x></x></span> 86 <span><x></x></span> 87 <span><x></x></span> 88 <span><x></x></span> 89 </div> 90 </div> 91 92 <br> 93 94 <div style="width:320px;height:200px"> 95 <div class="grid percentgap" style="height:120px"> 96 <span><x></x></span> 97 <span><x></x></span> 98 <span><x></x></span> 99 <span><x></x></span> 100 </div> 101 </div> 102 103 <div class="inline-grid"> 104 <div class="grid calcgap"> 105 <span><x></x></span> 106 <span><x></x></span> 107 <span><x></x></span> 108 <span><x></x></span> 109 </div> 110 </div> 111 112 <div class="inline-grid" style="grid: auto / auto"> 113 <div class="grid calcgap" style="align-self:start; justify-self:start; width:160px; height:120px"> 114 <span><x></x></span> 115 <span><x></x></span> 116 <span><x></x></span> 117 <span><x></x></span> 118 </div> 119 </div> 120 121 <div class="inline-grid"> 122 <div class="grid" style="grid: min-content calc(12px + 10%) min-content / min-content calc(16px + 10%) min-content"> 123 <span><x></x></span><z></z><span><x></x></span> 124 <z></z><z></z><z></z> 125 <span><x></x></span><z></z><span><x></x></span> 126 </div> 127 </div> 128 129 <br> 130 131 <div style="width:320px;height:200px"> 132 <div class="grid calcgap" style="height:120px; grid-column-gap:calc(32px + 10%)"> 133 <span><x></x></span> 134 <span><x></x></span> 135 <span><x></x></span> 136 <span><x></x></span> 137 </div> 138 </div> 139 140 <div style="width:320px;height:200px"> 141 <div class="grid calcgap" style="height:120px; grid-gap:calc(32px - 30%)"> 142 <span><x></x></span> 143 <span><x></x></span> 144 <span><x></x></span> 145 <span><x></x></span> 146 </div> 147 </div> 148 149 <div class="float" style="margin-top:-50px"> 150 <div class="grid percentgap cfill" style="min-width:300%"> 151 <span><x></x></span> 152 <span><x></x></span> 153 <span><x></x></span> 154 <span><x></x></span> 155 </div> 156 </div> 157 158 </body> 159 </html>