html怎么调整网格的位置,html-在CSS网格中对齐列

我应该设置哪些CSS属性,以使各列??之间相互包裹,而忽略水平相邻列的高度？

尝试失败

我正在尝试使用display：grid来做到这一点,但是它并没有表现出我想要的样子.一个例子：

header {

height: 2.0rem;

background: PeachPuff;

}

footer {

height: 2.0rem;

background: PaleGreen;

}

header,

footer,

section.app-column {

padding: 1.0rem;

}

section#main section#app-column-primary {

grid-area: primary;

height: 5.0rem;

background: Cyan;

}

section#main section#app-column-secondary {

grid-area: secondary;

height: 15.0rem;

background: Thistle;

}

section#main section#app-column-tertiary {

grid-area: tertiary;

height: 10.0rem;

background: Coral;

}

section#main {

display: grid;

grid-template-columns: repeat(3, 10.0rem);

grid-row-gap: 0.2rem;

grid-column-gap: 0.5rem;

}

section#main {

content: "This application requires a display at least 200 pixels wide.";

}

@media(min-width: 200px) {

section#main {

grid-template-areas:

"primary"

"secondary"

"tertiary";

}

}

@media(min-width: 350px) {

section#main {

grid-template-areas:

"primary secondary"

"tertiary .";

}

}

@media(min-width: 520px) {

section#main {

grid-template-areas:

"primary secondary tertiary";

}

}

Header ipsum, dolor sit amet.

Primary app column

Secondary app column

Tertiary app column

Footer ipsum, dolor sit amet.

3列和1列的正确结果

这就是我需要的三栏式(“主要二级”)和一栏式(“主要”“二级”“三级”)布局.

2列不需要的布局

但是,两列布局的第三列从第二列开始：

2列的所需布局

我想要的是第三列的位置忽略第二列,因为它们根本不会重叠：

如何使用CSS做到这一点？显示：网格适合于此吗？我应该使用display：flex还是其他一些东西(如果是,那么我到底需要什么CSS属性)？