repeat-auto-fill-007-ref.html (2903B)
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: repeat(auto-fill / INTEGER, line-names)</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid { 16 display: inline-grid; 17 grid-auto-columns: 20px; 18 background: lightgrey; 19 } 20 21 .subgrid { 22 display: grid; 23 grid: subgrid / auto; 24 grid-column: 2 / span 4; 25 background: black; 26 writing-mode: vertical-rl; 27 } 28 29 item { 30 min-width: 0; 31 min-height: 10px; 32 background: grey; 33 writing-mode: horizontal-tb; 34 } 35 36 </style> 37 </head> 38 <body> 39 40 <div class="grid"> 41 <div class="subgrid"> 42 <item style="grid-row:1 / 5"></item> 43 </div> 44 </div> 45 46 <div class="grid"> 47 <div class="subgrid"> 48 <item style="grid-row:1 / 5"></item> 49 </div> 50 </div> 51 52 <div class="grid"> 53 <div class="subgrid"> 54 <item style="grid-row:1 / 2"></item> 55 </div> 56 </div> 57 58 <div class="grid"> 59 <div class="subgrid"> 60 <item style="grid-row:2 / 5"></item> 61 </div> 62 </div> 63 64 <div class="grid"> 65 <div class="subgrid"> 66 <item style="grid-row:2 / 4"></item> 67 </div> 68 </div> 69 70 <div class="grid"> 71 <div class="subgrid"> 72 <item style="grid-row:3 / 4"></item> 73 </div> 74 </div> 75 76 <div class="grid"> 77 <div class="subgrid"> 78 <item style="grid-row:1 / 2"></item> 79 </div> 80 </div> 81 82 <div class="grid"> 83 <div class="subgrid"> 84 <item style="grid-row:1 / 4"></item> 85 </div> 86 </div> 87 88 <div class="grid"> 89 <div class="subgrid"> 90 <item style="grid-row:1 / 5"></item> 91 </div> 92 </div> 93 94 <div class="grid"> 95 <div class="subgrid"> 96 <item style="grid-row:1 / 2"></item> 97 </div> 98 </div> 99 100 <div class="grid"> 101 <div class="subgrid"> 102 <item style="grid-row:1 / 2"></item> 103 </div> 104 </div> 105 106 <div class="grid"> 107 <div class="subgrid"> 108 <item style="grid-row:1 / 5"></item> 109 </div> 110 </div> 111 112 <div class="grid"> 113 <div class="subgrid"> 114 <item style="grid-row:2 / 5"></item> 115 </div> 116 </div> 117 118 <div class="grid"> 119 <div class="subgrid"> 120 <item style="grid-row:2 / 3"></item> 121 </div> 122 </div> 123 124 <div class="grid"> 125 <div class="subgrid"> 126 <item style="grid-row:1 / 5"></item> 127 </div> 128 </div> 129 130 <div class="grid"> 131 <div class="subgrid"> 132 <item style="grid-row:1 / 5"></item> 133 </div> 134 </div> 135 136 <div class="grid"> 137 <div class="subgrid"> 138 <item style="grid-row:1 / 5"></item> 139 </div> 140 </div> 141 142 <div class="grid"> 143 <div class="subgrid"> 144 <item style="grid-row:1 / 5"></item> 145 </div> 146 </div> 147 148 <div class="grid"> 149 <div class="subgrid"> 150 <item style="grid-row:1 / 5"></item> 151 </div> 152 </div> 153 154 <div class="grid"> 155 <div class="subgrid"> 156 <item style="grid-row:1 / 5"></item> 157 </div> 158 </div> 159 160 <div class="grid"> 161 <div class="subgrid"> 162 <item style="grid-row:1 / 2"></item> 163 </div> 164 </div> 165 166 </body> 167 </html>