@Xyyax

Почему не работает grid?

Не работает свойство grid-template-areas.

<div class="grid">
            <div class="item item-a">Header</div>
            <div class="item item-b">Main</div>
            <div class="item item-c">Sidebar</div>
            <div class="item item-d">Footer</div>
        </div>

.item {
    background-color: #ccc;
    text-align: center;
    padding: 20px 10px;
  }

.grid {
    display: grid;
    grid-gap:10px;
    grid-template-columns: 50px 50px 50px;
    grid-template-areas: "header header header" "sidebar main sidebar";
}

.item-a{
    grid-area:header;
}

.item-b{
    grid-area:main;
}

.item-c{
    grid-area:sidebar;
}

.item-d{
    grid-area:footer;
}

Вот что получается в итоге.
В чём проблема?
  • Вопрос задан
  • 24 просмотра
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
1. sidebar разорван
2. footer отсутствует

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы