TAG
CSS
Result
Run
License
<div class="wrapper"> <div><h2>Header</h2></div> <div><h2>Main</h2></div> <div><h2>Aside</h2></div> <div><h2>Footer</h2></div> </div>
.wrapper { display: grid; grid-gap: 10px; grid-template: "header header" 100px "aside main" "footer footer" / 200px 1fr; background: #00cbff; } .wrapper > div { background: rgba(255, 255, 255, 0.8); text-align: center; } .wrapper > div:nth-child(1) { grid-area: header; } .wrapper > div:nth-child(2) { grid-area: main; } .wrapper > div:nth-child(3) { grid-area: aside; } .wrapper > div:nth-child(4) { grid-area: footer; }
Console
expand_less
License
License
by DevDic
Close