x
<html><head><style>.item1 { grid-area: header; }.item2 { grid-area: menu; }.item3 { grid-area: main; }.item4 { grid-area: right; }.item5 { grid-area: footer; }.grid-container { display: grid; grid: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; grid-gap: 10px; background-color: #2196F3; padding: 10px;}.grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px;}</style></head><body><h1>A Webpage Template</h1><p>You can use the <em>grid-areas</em> property to name grid items.</p><p>You can refer to the name when you set up the grid layout, by using the <em>grid</em> property on the grid container.</p><p>This grid layout contains six columns and three rows:</p><div class="grid-container"> <div class="item1">Header</div> <div class="item2">Menu</div> <div class="item3">Main</div> <div class="item4">Right</div> <div class="item5">Footer</div></div></body>