placement-implicit-001.html (1521B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: 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 <link rel="match" href="placement-implicit-001-ref.html"> 8 <style> 9 html,body { 10 font:10px/1 monospace; 11 padding:0; 12 margin:0; 13 } 14 15 .grid { 16 display: inline-grid; 17 grid-auto-columns: 15px; 18 border: 1px solid; 19 } 20 21 .subgrid { 22 display: grid; 23 grid-template-columns: subgrid; 24 grid-column: 3 / span 4; 25 grid-auto-rows: 8px; 26 background: grey; 27 } 28 29 .subgrid > :nth-child(2n) { background: black; } 30 .subgrid > :nth-child(2n+1) { background: pink; } 31 32 </style> 33 </head> 34 <body> 35 36 <div class="grid"> 37 <div class="subgrid"> 38 <div style="grid-column:5"></div> 39 <div style="grid-column:x"></div> 40 <div style="grid-column:5"></div> 41 <div></div> 42 <div style="grid-column:5"></div> 43 </div> 44 </div> 45 46 <div class="grid"> 47 <div class="subgrid"> 48 <div style="grid-column:5"></div> 49 <div style="grid-column:5"></div> 50 <div style="grid-column:x"></div> 51 <div style="grid-column:5"></div> 52 <div style="grid-column:x"></div> 53 <div style="grid-column:5"></div> 54 </div> 55 </div> 56 57 <div class="grid"> 58 <div class="subgrid"> 59 <div style="grid-column:5"></div> 60 <div></div> 61 <div style="grid-column:5"></div> 62 <div></div> 63 <div style="grid-column:5"></div> 64 <div></div> 65 </div> 66 </div> 67 68 </body> 69 </html>