grid-placement-definite-001.html (760B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 7 .grid { 8 display: grid; 9 grid-template-areas: 10 '. . a a a .' 11 '. . a a a .' 12 '. b b . . .' 13 ; 14 border: 10px solid green; 15 grid-template-columns: 20px 20px 20px 20px; 16 grid-template-rows: 20px 20px 20px; 17 grid-auto-flow: column dense; 18 grid-auto-columns: 20px; 19 grid-auto-rows: 20px; 20 font-size:12px; 21 } 22 23 span { 24 background: lime; 25 border: 1px solid black; 26 } 27 28 .a { 29 grid-area: a; 30 } 31 .b { 32 grid-column: 2 / span 3; 33 grid-row: b; 34 } 35 .c { 36 grid-column: span 3; 37 } 38 .d { 39 grid-row: span 3; 40 } 41 </style> 42 </head> 43 <body> 44 45 <div class=grid> 46 <span class=a>a</span> 47 <span class=b>b</span> 48 <span class=c>c</span> 49 <span class=d>d</span> 50 </div> 51 52 </body> 53 </html>