跨网格的内容

默认情况下，网格中的内容放置在单独的网格单元格中。可以将任何子网格设置为跨多列、多行或多列和多行。

当您跨越内容时，其他内容将自动流动，为跨越的内容腾出位置。有时，这可能导致网格中出现空单元格。启用“密集”选项将尝试填充这些空间。

在这个视频中

在本视频中，我们向您展示如何创建一个响应式网格布局的内容跨越多个单元格。我们还将向您展示如何使用“致密”选项来填充生成内容时可能产生的任何空单元格。

要创建这个布局，你需要:

1. 将您的内容放在div块中
2. 将此div块转换为网格
3. 调整网格列
4. 重新定位网格中的内容
5. 将您的一些内容跨越多个单元格
6. 调整较小断点上的网格和网格子节点，使其具有响应性

关于可访问性的说明

虽然使用稠密是一个方便的选项，可以确保你的布局在任何特定的屏幕宽度下看起来都不太时髦，但应该注意的是，稠密会给使用屏幕阅读器的人带来可访问性问题，因为它经常以与源HTML不匹配的顺序排列内容。

有用的资源:CSS网格重排序和可访问性[xxx]