Вы назначили области сетки своим несемантическим элементам в своем CSS. Вот почему семантические элементы вмешиваются в вашу сетку - потому что в итоге они вообще не участвуют в вашей сетке. Если вы начали с несемантической структуры, а затем перешли на семантические элементы, возможно, это был пропущенный вами шаг.
Назначение областей сетки вашим семантическим элементам позволяет удалить несемантические элементы. вместо этого, завершив эту миграцию:
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container * {
border: 1px solid red;
position: relative;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 40em 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
" . header . "
" . content . "
" . footer . ";
}
header {
grid-area: header;
}
main {
grid-area: content;
}
footer {
grid-area: footer;
}
<div class="grid-container">
<header>header</header>
<main>content</main>
<footer>footer</footer>
</div>