css grid, grid-area избегать перекрытия элементов

Question

У меня есть следующие CSS и разметка

<div class="wrapper">
    <div class="content">Header</div>
    <div class="content">Sidebar</div>
    <div class="content">Content</div>
    <div class="content">Footer</div>
</div>

CSS

.content {
    grid-area: main;
}

Элементы сетки перекрываются в области сетки.Вместо этого я хочу, чтобы элементы появлялись один за другим в области сетки.Это возможно?