Озадаченный диапазоном столбцов в сетке CSS не работает должным образом

Question

Я пытаюсь создать макет с полноразмерным заголовком, затем два рекламных блока шириной 150px, сложенных вертикально слева, основная часть в центре, а затем еще два рекламных блока, сложенных вертикально справа, с полным нижний колонтитул в нижней части.

Код, который я ожидал, будет работать

.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>

но заголовок заполняет только самую левую ячейку верхнего ряда.

Я могу заставить его работать, добавив

header {
    grid-column: 1 / 4;
}

, чтобы заставить заголовок охватить всю ширину сетки, но, конечно, это не должно быть нужно? Использование grid-template-areas: "header header header" должно достичь этого без использования grid-column, не так ли?

Confused! Любая помощь приветствуется!

Answer 1

Вам необходимо указать grid-area: header; для вашего header элемента.

.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";
}

div {
    font-size: 28px;
}

body {
    text-align: center;

}
.ad {
    height: 250px;
}

header {
    background: LightSalmon;
    grid-area: header;
}

#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>
  <main>Main</main>
  <footer>Footer</footer>

  <div id="left_ad1">Left ad 1</div>
  <div id="left_ad2" class="ad">Left ad 2</div>
  <div id="right_ad1" class="ad">Right ad 1</div>
  <div id="right_ad2" class="ad">Right ad 2</div>
</div>