css grid, grid-area avoid items overlapping

问题

I have the following css and markup

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

The items on the grid overlap on the grid area. I instead want the items to come one after another on the grid area. Is this possible?

来源：https://stackoverflow.com/questions/55528419/css-grid-grid-area-avoid-items-overlapping