placement-implicit-001-ref.html (1599B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Reference: : Implicit line placement with a subgrid</title> 5 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement"> 7 <style> 8 html,body { 9 font:10px/1 monospace; 10 padding:0; 11 margin:0; 12 } 13 14 .grid { 15 display: inline-grid; 16 grid-auto-columns: 15px; 17 border: 1px solid; 18 } 19 20 .subgrid { 21 display: grid; 22 grid-template-columns: subgrid; 23 grid-column: 3 / span 4; 24 grid-auto-rows: 8px; 25 background: grey; 26 } 27 28 .subgrid > :nth-child(2n) { background: black; } 29 .subgrid > :nth-child(2n+1) { background: pink; } 30 31 </style> 32 </head> 33 <body> 34 35 <div class="grid"> 36 <div class="subgrid"> 37 <div style="grid-column:5"></div> 38 <div style="grid-column:x"></div> 39 <div style="grid-column:5"></div> 40 <div style="grid-row: 4; grid-column:1"></div> 41 <div style="grid-column:5"></div> 42 </div> 43 </div> 44 45 <div class="grid"> 46 <div class="subgrid"> 47 <div style="grid-column:5"></div> 48 <div style="grid-column:5"></div> 49 <div style="grid-column:5"></div> 50 <div style="grid-column:5"></div> 51 <div style="grid-column:5"></div> 52 <div style="grid-column:5"></div> 53 </div> 54 </div> 55 56 <div class="grid"> 57 <div class="subgrid"> 58 <div style="grid-column:5"></div> 59 <div style="grid-row: 2; grid-column:1"></div> 60 <div style="grid-column:5"></div> 61 <div style="grid-row: 3; grid-column:1"></div> 62 <div style="grid-column:5"></div> 63 <div style="grid-row: 4; grid-column:1"></div> 64 </div> 65 </div> 66 67 </body> 68 </html>