CSS: уровень 4

Вопрос 1 из 20

Как создать макет с именованными областями grid-template-areas (шапка, сайдбар, контент, подвал)?

Ответ

.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }