Я пытаюсь создать каркас с помощью CSS Grid, но не могу заставить макет работать. Есть какие-нибудь советы? ⇐ CSS

[Anonymous]

Я прохожу курс кодирования, и одно из заданий — создать каркас с помощью CSS Grid. Я пытаюсь использовать шаблон сетки. И пока что он работает не так, как должен.

Код: Выделить всё

div {
width: 320px;
height: 450px;
margin: auto;
background-color: #b1b5be;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, auto) 1fr repeat(2, auto);
grid-template-areas:
"header"
"aside"
"main-content"
"aside"
"footer";
}

header {
width: 75%;
height: 13%;
background-color: #9f1f63;
font-size: 1.7em;
border-radius: 10px;
}

section {
width: 75%;
height: 50%;
background-color: #26b47e;
border-radius: 10px;
}

article {
width: 90%;
height: 25%;
background-color: #e5195b;
align-items: center;
border-radius: 10px;
}

aside {
width: 75%;
height: 13%;
background-color: #126395;
font-size: 1.7em;
border-radius: 10px;
}

footer {
width: 75%;
height: 13%;
background-color: #df6b26;
font-size: 1.7em;
border-radius: 10px;
}

Код: Выделить всё

    

HEADER

COLUMN
COLUMN
COLUMN

ASIDE
FOOTER

Он также должен расширяться на более широком экране, чтобы столбцы располагались рядом, что я знаю, как это сделать, но сначала мне нужно это выяснить.
Может ли кто-нибудь мне с этим помочь? Любые советы очень ценятся. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ut-to-coop