doc_subgrid.html (955B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <style> 6 .container { 7 display: grid; 8 grid-gap: 5px; 9 grid-template: auto / 1fr 3fr 1fr; 10 background: lightyellow; 11 } 12 13 .subgrid { 14 display: grid; 15 grid: subgrid / subgrid; 16 } 17 18 header, aside, section, footer { 19 background: lightblue; 20 font-family: sans-serif; 21 font-size: 3em; 22 } 23 24 header, footer { 25 grid-column: span 3; 26 } 27 28 main { 29 grid-column: span 3; 30 } 31 32 .aside1 { 33 grid-column: 1; 34 } 35 36 .aside2 { 37 grid-column: 3; 38 } 39 40 section { 41 grid-column: 2; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="container"> 47 <header class="subgrid">Header</header> 48 <main class="subgrid"> 49 <aside class="aside1 subgrid">aside</aside> 50 <section>section</section> 51 <aside class="aside2 subgrid">aside2</aside> 52 </main> 53 <footer>footer</footer> 54 </div> 55 </body> 56 </html>