如何创建响应性流体CSS网格

我很难理解如何根据媒体大小放置元素。例如，在mobile上，我希望元素按编号堆叠在一列中；一篇文章，广告，另一篇文章，然后是文章的挑逗

如果元素从网格中的特定行开始（如中所示），我理解如何使用CSS网格执行此操作，但演示没有显示当我需要内容从文档顶部流动时，节中的实际内容是如何显示的

我可能期望太高了，但这是否可能使用CSS网格？在过去，我可以使用React来实现这一点，但在条件渲染和窗口宽度查询方面非常粗糙

html，正文{
身高：100%；
保证金：0；
}
.山猫皮{
/*这些元素没有显示在我们的mobile first布局中*/
显示：无；
}
.文章{
背景颜色：米色；
保证金：5px；
高度：285px；
}
.广告{
背景颜色：米色；
保证金：5px；
高度：100px；
}
.更多{
背景颜色：米色；
保证金：5px；
高度：300px；
}
旁白{
背景颜色：浅蓝色；
/*说出这个地区的名字*/
网格区域：侧边；
}
主要{
背景色：浅海绿色；
网格区域：主；
}
页脚{
背景颜色：浅珊瑚；
网格区域：页脚；
}
包装纸{
/*设置网格*/
显示：网格；
身高：100%；
/*指定一个静态值并使用小数单位获取余数*/
网格模板行：1fr 50px；
/*1fr是假定的，不是必需的，但用于演示*/
网格模板列：1fr；
/*指定获取每个网格区域的元素*/
网格模板区域：“主”“页脚”；
}
@介质（最小宽度：600px）{
.山猫皮{
/*在较大的显示器上显示元素*/
显示：首字母；
}
包装纸{
网格模板列：2fr 1fr；
网格模板区域：“主边”“页脚”；
}
}

在一边
公元2年
文章摘要4
主要的
第一条
第三条
页脚

首先，您缺少视口。您可以在完整的html中使用它

我的“解决方案”是可行的，但我会考虑以一种不使用包装器的方式重新构造html标记

除了使用

之外，我还会使用

aside.ad

和

aside.more来摆脱封装。在网格中工作得更好

如果有什么不清楚的地方，请随时提出更多的问题


html，
身体{
身高：100%；
保证金：0；
}
文章{
背景颜色：米色；
保证金：5px；
高度：285px；
}
.广告{
背景颜色：米色；
保证金：5px；
高度：100px；
}
.更多{
背景颜色：米色；
保证金：5px；
高度：300px；
}
旁白{
背景颜色：浅蓝色；
显示：内容；
}
.广告{
网格面积：ad；
}
.更多{
网格面积：更多；
}
主要{
背景色：浅海绿色；
显示：内容；
}
主要文章：第n个孩子（1）{
网格区域：第一篇文章
}
主要文章：第n个孩子（2）{
网格区域：第二篇文章
}
页脚{
背景颜色：浅珊瑚；
网格区域：页脚；
}
包装纸{
/*设置网格*/
显示：网格；
身高：100%；
/*指定一个静态值并使用小数单位获取余数*/
网格模板行：1fr自动50px；
/*1fr是假定的，不是必需的，但用于演示*/
网格模板列：1fr；
/*指定获取每个网格区域的元素*/
网格模板区域：“第一篇文章”“广告”“第二篇文章”“更多”“页脚”；
}
@介质（最小宽度：600px）{
包装纸{
网格模板列：2fr 1fr；
网格模板区域：“主边”“页脚”；
}
旁白{
/*说出这个地区的名字*/
网格区域：侧边；
}
主要{
网格区域：主；
}
主要的，
旁白{
显示：块；
}
}

在一边
公元2年
文章摘要4
主要的
第一条
第三条
页脚
秘密成分是多梅尼克建议的，并在


*{
保证金：5px；
填充物：5px；
}
身体{
显示：网格；
网格模板区域：“as1”“ad”“as2”“tsr”；
}
/*这是重新排列元素的关键*/
主要的，
旁白{
显示：内容；
}
主要{
背景色：深蓝色；
}
旁白{
背景色：暗绿色；
}
.挑逗者{
背景颜色：白杏仁；
最小高度：200px；
网格面积：tsr；
}
.as1{
背景色：仿古白色；
网格面积：as1；
最小高度：300px；
}
.as2{
背景色：仿古白色；
网格面积：as2；
最小高度：250px；
}
.广告{
背景色：浅绿色；
网格面积：ad；
}
@介质（最小宽度：400px）{
身体{
网格模板列：2fr 1fr；
网格模板区域：“as1 ad”“as2 tsr”；
}
主要的，
旁白{
显示：首字母；
}
}

文件标题