Макет с областью шаблона сетки в CSS [дубликат] ⇐ CSS

[Anonymous]

как дела?
почему мой код работает некорректно?
к сожалению, он не может применить нужный мне макет — между изображениями ниже и еще одним макетом с серой обратной стороной — Ground-color — это основной макет, который я хочу кодировать. Еще одно изображение — моя проблема с выводом макета.
Я пытался создать основной макет, но столкнулся с этой проблемой:
основной макет
мой вывод — это моя проблема


header
navigation
content
main
content
footer



.container {
display: grid;
grid-template-areas:
"header header header header header header"
"navigation navigation navigation navigation navigation navigation"
"content main main main main content"
"footer footer footer footer footer footer";
gap: 10px;
background-color: #f0f0f0; /* Container background color */
padding: 10px; /* Container padding */
}

.item {
background-color: #ccc; /* Default item background color */
padding: 20px;
border: 1px solid black;
text-align: center;
}

.header {
grid-area: header;
background-color: #ff9999; /* Header background color */
}

.nav {
grid-area: navigation;
background-color: #99ccff; /* Navigation background color */
}

.content {
grid-area: content;
background-color: #99ff99; /* Content background color */
}

.main {
grid-area: main;
background-color: #ffff99; /* Main background color */
}

.footer {
grid-area: footer;
background-color: #ffcc99; /* Footer background color */
}



Подробнее здесь: https://stackoverflow.com/questions/783 ... rea-in-css