line-names-004-ref.html (1420B)
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 item using mix of outer/inner line names</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:24px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b]; 18 padding: 20px 10px; 19 } 20 21 .subgrid { 22 display: grid; 23 grid-template-columns: subgrid [x] [b] [] [] [b]; 24 grid-auto-rows: 10px; 25 grid-column: 2 / span 4; 26 } 27 28 x { background: grey; } 29 30 </style> 31 </head> 32 <body> 33 34 <div class="grid"> 35 <div class="subgrid"> 36 <x style="grid-row:1; grid-column: 2 / 4"></x> 37 <x style="grid-row:2; grid-column: 2 / 5"></x> 38 <x style="grid-row:3; grid-column: 2 / 4"></x> 39 <x style="grid-row:4; grid-column: 2 / 4"></x> 40 <x style="grid-row:5; grid-column: 2 / 5"></x> 41 <x style="grid-row:6; grid-column: 2 / 4"></x> 42 <x style="grid-row:7; grid-column: 1 / 4"></x> 43 <x style="grid-row:8; grid-column: 2 / 4"></x> 44 <x style="grid-row:9; grid-column: 2 / 3"></x> 45 <x style="grid-row:10; grid-column: 2 / 3"></x> 46 <x style="grid-row:11; grid-column: 2 / 5"></x> 47 <x style="grid-row:12; grid-column: 2 / 4"></x> 48 </div> 49 </div> 50 51 </body> 52 </html>