line-names-006-ref.html (3530B)
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 div > div { background: grey; grid-column: 2 / span 2; } 16 17 i { 18 grid-row: 1; 19 counter-increment: i; 20 } 21 i::before { content: counter(i, decimal); } 22 23 x { background: silver; } 24 25 .hr { writing-mode: horizontal-tb; direction:rtl; } 26 </style> 27 </head> 28 <body> 29 30 <div style="display:grid"> 31 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 32 <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> 33 <x style="grid-column: 2 / 3">x</x> 34 </div> 35 </div> 36 37 <div style="display:grid"> 38 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 39 <div style="display:grid; grid:auto/subgrid [a];"> 40 <x style="grid-column: 1 / 2">x</x> 41 </div> 42 </div> 43 44 <div style="display:grid"> 45 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 46 <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> 47 <x style="grid-column: 1 / 2">x</x> 48 </div> 49 </div> 50 51 <div style="display:grid"> 52 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 53 <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> 54 <x style="grid-column: 2 / 3">x</x> 55 </div> 56 </div> 57 58 <div style="display:grid"> 59 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 60 <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> 61 <x style="grid-column: 3 / 4">x</x> 62 </div> 63 </div> 64 65 <div style="display:grid"> 66 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 67 <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> 68 <x style="grid-column: 2 / 3">x</x> 69 </div> 70 </div> 71 72 <div style="display:grid"> 73 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 74 <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> 75 <x style="grid-column: 2 / 3">x</x> 76 </div> 77 </div> 78 79 <div style="display:grid"> 80 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 81 <div class="hr" style="display:grid; grid:auto/subgrid [a];"> 82 <x style="grid-column: 1 / 2">x</x> 83 </div> 84 </div> 85 86 <div style="display:grid"> 87 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 88 <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> 89 <x style="grid-column: 1 / 2">x</x> 90 </div> 91 </div> 92 93 <div style="display:grid"> 94 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 95 <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> 96 <x style="grid-column: 2 / 3">x</x> 97 </div> 98 </div> 99 100 <div style="display:grid"> 101 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 102 <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> 103 <x style="grid-column: 3 / 4">x</x> 104 </div> 105 </div> 106 107 <div style="display:grid"> 108 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 109 <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> 110 <x style="grid-column: 2 / 3">x</x> 111 </div> 112 </div> 113 114 </body> 115 </html>