Html 在CSS网格中对齐列

我应该设置什么样的CSS属性，以使列彼此包裹，忽略水平相邻列的高度

失败的尝试 我正试图用

display:grid

来实现这一点，但它的行为并不是我想要的。例如：

标题{
高度：2.0雷姆；
背景：桃花；
}
页脚{
高度：2.0雷姆；
背景：淡绿色；
}
标题，
页脚，
section.app-column{
填充：1.0雷姆；
}
章节#主要章节#应用栏目主要{
网格区域：主；
高度：5.0雷姆；
背景：青色；
}
章节#主要章节#应用栏目次要章节{
网格区域：二级；
高度：15.0雷姆；
背景：蓟；
}
章节#主要章节#附录第三栏{
网格区域：第三系；
高度：10.0雷姆；
背景：珊瑚；
}
第#节主要内容{
显示：网格；
网格模板列：重复（3，10.0rem）；
网格行间距：0.2rem；
栅柱间隙：0.5雷姆；
}
第#节主要内容{
内容：“此应用程序需要至少200像素宽的显示器。”；
}
@介质（最小宽度：200px）{
第#节主要内容{
网格模板区域：
“主要”
“二级”
“第三”；
}
}
@介质（最小宽度：350px）{
第#节主要内容{
网格模板区域：
“小学-中学”
“第三级”；
}
}
@介质（最小宽度：520像素）{
第#节主要内容{
网格模板区域：
“小学、中学、大学”；
}
}

Header ipsum，dolor sit amet。
主应用程序列
第二应用程序列
第三级应用程序列
Footer ipsum，dolor sit amet。

我尝试使用属性

网格行结束

和

自动填充

为您提供解决方案

Firstable：这个解决方案与您的维度配合得很好（它的可伸缩性不是很好，但不幸的是，如果不使用javascript，我认为没有一个完美而纯粹的CSS解决方案）

顺便说一句，这就是它的工作原理：

• 我使用

  网格模板列创建网格：重复（自动填充，10rem）属性

• 对于每一个网格项，我都会在网格行末尾加上一个

  ：span[dimension]=>对于5rem我放[1]，对于15rem我放[3]，对于10REM我放[2]（这是我说的“它不可伸缩”，因为如果你改变尺寸，你也必须在这里改变）

对于所有这些属性，您可以在这里找到非常有用的信息：这里：（我提到了我的CSS专家，我有点兴奋（^ ^；）

这是正在运行的代码：

标题{
高度：2.0雷姆；
背景：桃花；
}
页脚{
高度：2.0雷姆；
背景：淡绿色；
}
标题，
页脚，
section.app-column{
填充：1rem；
}
章节#主要章节#应用栏目主要{
身高：5雷姆；
网格行端：跨度1；
背景：青色；
}
章节#主要章节#应用栏目次要章节{
网格行端：跨度3；
高度：15雷姆；
背景：蓟；
}
章节#主要章节#附录第三栏{
网格行端：跨度2；
高度：10雷姆；
背景：珊瑚；
}
第#节主要内容{
显示：网格；
网格模板列：重复（自动填充，10rem）；
网格行间距：0.5雷姆；
栅柱间隙：0.5雷姆；
}

Header ipsum，dolor sit amet。
主应用程序列
第二应用程序列
第三级应用程序列
页脚ipsum，dolor sit amet.

而不是这个：

@media(min-width: 350px) {
    section#main {
        grid-template-areas:
            "primary secondary"
            "tertiary .";
    }
}

。。。这将创建一个2x2网格，如下所示：

[ primary ] [ secondary ]

[tertiary ] [ empty space ]

。。。这正是你所展示的问题：

这样做：

@media(min-width: 350px) {
    section#main {
        grid-template-areas:
            "primary secondary"
            "tertiary secondary";
    }
}

标题{
高度：2.0雷姆；
背景：桃花；
}
页脚{
高度：2.0雷姆；
背景：淡绿色；
}
标题，
页脚，
section.app-column{
填充：1.0雷姆；
}
章节#主要章节#应用栏目主要{
网格区域：主；
高度：5.0雷姆；
背景：青色；
}
章节#主要章节#应用栏目次要章节{
网格区域：二级；
高度：15.0雷姆；
背景：蓟；
}
章节#主要章节#附录第三栏{
网格区域：第三系；
高度：10.0雷姆；
背景：珊瑚；
}
第#节主要内容{
显示：网格；
网格模板列：重复（3，10.0rem）；
网格行间距：0.2rem；
栅柱间隙：0.5雷姆；
}
第#节主要内容{
内容：“此应用程序需要至少200像素宽的显示器。”；
}
@介质（最小宽度：200px）{
第#节主要内容{
网格模板区域：“主”“次”“三级”；
}
}
@介质（最小宽度：350px）{
第#节主要内容{
网格模板区域：“主辅助”“第三辅助”；
}
}
@介质（最小宽度：520像素）{
第#节主要内容{
网格模板区域：“一级-二级-三级”；
}
}

Header ipsum，dolor sit amet。
主应用程序列
第二应用程序列
第三级应用程序列
页脚ipsum，dolor sit amet.