I am trying to build a layout with a full-width header, then two 150px wide ad blocks stacked vertically on the left, the main part in the center, then two more ad blocks stacked vertically on the right, with a full-width footer at the bottom.
The code I expected to work is
.container { display: grid; grid-gap: 2px; background-color: black; padding: 2px; min-height: 300px; width: 100%; margin: 0 auto; --nav-width: 250px; } .container { grid-template-columns: 150px 1fr 150px; /*Three columns - 150px for the ads; rest of screen for main */ grid-template-rows: 200px 1fr 1fr 40px; grid-template-areas: "header header header" "left_ad1 main right_ad1" "left_ad2 main right_ad2" "footer footer footer"; } .header { background:PaleTurquoise; } .nav { background:LightPink; } .content { background:red; } .footer { background:blue; } div { font-size: 28px; } body { text-align: center; } .ad { height: 250px; } header { background: LightSalmon; } #left_ad1 { background:PaleTurquoise; grid-area: left_ad1; } #left_ad2 { background:PaleTurquoise; grid-area: left_ad2; } #right_ad1 { background:LightPink; grid-area: right_ad1; } #right_ad2 { background:LightPink; grid-area: right_ad2; } main { background-color: red; grid-area: main; } footer { background: LightSkyBlue; grid-area: footer; }<div class="container"> <header>Header</header> <div id="left_ad1">Left ad 1</div> <main>Main</main> <div id="right_ad1" class="ad">Right ad 1</div> <div id="left_ad2" class="ad">Left ad 2</div> <div id="right_ad2" class="ad">Right ad 2</div> <footer>Footer</footer> </div>but this makes the header fill just the left-most cell of the top row.
I can get it to work by adding
header { grid-column: 1 / 4; } to force the header to span the whole width of the grid, but surely that shouldn't be needed? The use of grid-template-areas: "header header header" should achieve that without the use of grid-column shouldn't it?
Confused! Any help appreciated!
