line-names-005-ref.html (4331B)
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: subgrid line name resolution</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:12px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] / 18 [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k]; 19 grid-template-areas: ". . . e . . . . . . ."; 20 place-content: start; 21 border: 1px solid; 22 width: 500px; 23 grid-auto-columns: 100px; 24 grid-auto-rows: 100px; 25 } 26 27 .subgrid { 28 display: grid; 29 grid: auto / subgrid; 30 background: lightgrey; 31 grid-column: 2 / span 8; 32 grid-row: 2 / span 2; 33 min-width:0; 34 min-height:0; 35 } 36 37 .subgrid2 { 38 display: grid; 39 grid: auto / subgrid [] [] [] [b]; 40 grid-column: span 10; 41 } 42 43 .subgrid#s1 { 44 grid-template-areas: ". e e . . . ."; 45 } 46 47 i { 48 grid-row: 1; 49 counter-increment: i; 50 } 51 i::before { content: counter(i, decimal); } 52 53 x { 54 min-width:10px; 55 min-height:20px; 56 background:silver; 57 } 58 59 .hl { writing-mode: horizontal-tb; direction:ltr; } 60 .hr { writing-mode: horizontal-tb; direction:rtl; } 61 62 </style> 63 </head> 64 <body> 65 66 <div class="grid"> 67 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 68 <div class="subgrid" id="s1"> 69 <x style="grid-column:10 / span 4">x</x> 70 </div> 71 </div> 72 73 <div class="grid hr"> 74 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 75 <div class="subgrid hl" id="s2"> 76 <x style="grid-column: 10 / span 4">x</x> 77 </div> 78 </div> 79 80 <div class="grid"> 81 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 82 <div class="subgrid hr" id="s2"> 83 <x style="grid-column: 10 / span 4">x</x> 84 </div> 85 </div> 86 87 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 88 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 89 <div class="subgrid2"> 90 <x style="grid-column:1 / 4">x</x> 91 </div> 92 </div> 93 94 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 95 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 96 <div class="subgrid2"> 97 <x style="grid-column:10 / span 4">x</x> 98 </div> 99 </div> 100 101 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 102 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 103 <div class="subgrid2"> 104 <x style="grid-column: 1 / -1">x</x> 105 </div> 106 </div> 107 108 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 109 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 110 <div class="subgrid2"> 111 <x style="grid-row:2; grid-column: 1 / -1">x</x> 112 </div> 113 </div> 114 115 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 116 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 117 <div class="subgrid2"> 118 <x style="grid-column: span 3 / 11">x</x> 119 </div> 120 </div> 121 122 <div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] "> 123 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 124 <div class="subgrid2" style="grid-row:2"> 125 <x style="grid-column: 10 / 11">x</x> 126 </div> 127 </div> 128 129 <div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]"> 130 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 131 <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2"> 132 <x style="grid-column: 10 / 11">x</x> 133 </div> 134 </div> 135 136 <div style='display:grid; grid-template-areas: "a a a a a a a a a a"'> 137 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 138 <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> 139 <x style="grid-column: 1 / 6">x</x> 140 </div> 141 </div> 142 143 <div style='display:grid; grid-template-areas: ". . . . . . a a a a"'> 144 <div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'> 145 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 146 <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> 147 <x style="grid-column: 2 / 5">x</x> 148 </div> 149 </div> 150 </div> 151 152 </body> 153 </html>