line-names-010.html (4167B)
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: subgrid implicit line names are clamped to the subgrid axis</title> 9 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <link rel="match" href="line-names-010-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; 15 } 16 17 div > div { background: grey; grid-column:2 / span 2; } 18 19 i { 20 grid-row: 1; 21 counter-increment: i; 22 } 23 i::before { content: counter(i, decimal); } 24 25 x { background: silver; } 26 </style> 27 </head> 28 <body> 29 30 <div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> 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-column:5 / 9;"> 33 <x style="grid-column: a">x</x> 34 </div> 35 </div> 36 37 <div style="display:grid; grid-template-areas: 'a a a';"> 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; grid-column:5 / 9;"> 40 <x style="grid-column: a">x</x> 41 </div> 42 </div> 43 44 <div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> 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; grid-column:5 / 9;"> 47 <x style="grid-column: a-start / a-end">x</x> 48 </div> 49 </div> 50 51 <div style="display:grid; grid-template-areas: 'a a a';"> 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; grid-column:5 / 9;"> 54 <x style="grid-column: a-start / a-end">x</x> 55 </div> 56 </div> 57 58 <div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> 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; grid-column:5 / 9; grid-template-areas: 'a a a'";> 61 <x style="grid-column: a">x</x> 62 </div> 63 </div> 64 65 <div style="display:grid; grid-template-areas: 'a a a';"> 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; grid-column:5 / 9; grid-template-areas: 'a a a'"> 68 <x style="grid-column: a">x</x> 69 </div> 70 </div> 71 72 <div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> 73 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 74 <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> 75 <x style="grid-column: a-start / a-end">x</x> 76 </div> 77 </div> 78 79 <div style="display:grid; grid-template-areas: 'a a a';"> 80 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 81 <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> 82 <x style="grid-column: a-start / a-end">x</x> 83 </div> 84 </div> 85 86 <div style="display:grid; grid-template-areas: 'a a a';"> 87 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 88 <div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'"> 89 <x style="grid-column: a-start / a-end">x</x> 90 </div> 91 </div> 92 93 <div style="display:grid; grid-template-areas: 'a a a';"> 94 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 95 <div style="display:grid; grid:auto/subgrid [a];"> 96 <x style="grid-column: a">x</x> 97 </div> 98 </div> 99 100 <div style="display:grid; grid-template-areas: 'a a a';"> 101 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 102 <div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;"> 103 <x style="grid-column: a">x</x> 104 </div> 105 </div> 106 107 <div style="display:grid; grid-template-areas: 'a b c d'; grid-template-rows: 1fr 1fr;"> 108 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 109 <div style="display:grid; grid:subgrid/subgrid; grid-column: a / d; grid-row: 2;"> 110 <x style="grid-column: c">x</x> 111 </div> 112 </div> 113 </body> 114 </html>