css 网格布局_具有CSS网格布局的宽高比单元格

我发现自己最近在CSS Grid中构建了一个以前需要JavaScript才能工作的布局。 它是基于相等大小的正方形网格单元的布局，其中网格项可以在行和/或列轴上跨越一个或两个单元格。 换句话说，网格单元需要保持长宽比（在这种情况下为1：1），但实际的网格项不一定如此，如下所示：

克里斯·科耶尔（Chris Coyier） 在CSS Tricks上的一篇文章中探讨了Grid的长宽比，并记录了一个与我尝试构建的布局非常相似的解决方案，使用了相对知名的padding hack 。 缺点是长宽比作用于网格子级，而不作用于父网格容器。 如果您不将项目放置在网格跟踪行中（例如，如果您想要一个空行），则网格单元将折叠。 在此示例中，以红色概述的单元将折叠到零高度（或我们在grid-template-rows属性上设置的任何高度）：

我的目标是能够在网格单元上定义纵横比，以便即使在空的情况下也始终保持该比例。 我想看看是否可以使用CSS变量 （也称为自定义属性）找到适合自己的解决方案，从而允许我创建自己选择的任何纵横比的网格单元。

我想出的解决方案可能不适用于所有情况，因为它取决于知道外部容器的宽度，并且（因为它基于使用calc()计算网格行高），因此必须固定值或视口单位，不能是百分比。 我一般不建议以这种方式创建长宽比框，因为在响应式设计中，我们通常不知道任何给定项目的确切宽度。 但是，在使用Grid时，我通常会发现我确实知道外部网格包装的宽度。 （稍后对此有更多介绍。）

首先，我们需要一些值：

• 包装纸宽度
• 格栅装订线宽度
• 列数
• 我们要为网格单元实现的长宽比

我将这些值另存为变量，在进行网格计算时将非常有用：