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