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

Question

[Xyyax]

Не работает свойство 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;
}

Вот что получается в итоге.
В чём проблема?

Comments

[Yupiter7575]

Я надеюсь вы поняли, что делать при скролле подгрузку контента - довольно хреновая идея

Answer 1

[Сергей delphinpro]

1. sidebar разорван
2. footer отсутствует