css网格，网格区域避免项目重叠

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;
}

网格上的项目在网格区域上重叠。相反，我希望这些项目在网格区域中一个接一个地出现。这可能吗？