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