doc_markup_subgrid.html (885B)
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 header, aside, section, footer { 14 background: lightblue; 15 font-family: sans-serif; 16 font-size: 3em; 17 } 18 19 header, footer { 20 grid-column: span 3; 21 } 22 23 main { 24 grid-column: span 3; 25 display: grid; 26 grid: subgrid / subgrid; 27 } 28 29 .aside1 { 30 grid-column: 1; 31 } 32 33 .aside2 { 34 grid-column: 3; 35 } 36 37 section { 38 grid-column: 2; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="container"> 44 <header>Header</header> 45 <main> 46 <aside class="aside1">aside</aside> 47 <section>section</section> 48 <aside class="aside2">aside2</aside> 49 </main> 50 <footer>footer</footer> 51 </div> 52 </body> 53 </html>