仅 CSS 正方形网格，3 行，响应高度，可变数量的正方形

Question

我已经为此工作了 10 多个小时，在网上搜索解决方案，但无济于事。

这是草图的屏幕截图：

我需要生成具有以下要求的网格布局：

• 整体采用水平滚动布局。
• 相对于其容器的高度响应（使用 Stretch-to-margin 技术，它已经相对于主体响应）。
• 3 行等高 (33.333%)
• 由方形图像锚点组成
  • 鼠标悬停时：白色文本的颜色叠加
• 方形图片需要保持比例（降低窗口高度，图片宽度必须缩小。
• 整个布局的宽度必须是动态的，因为正方形的数量可能会有所不同。

我见过大量定义宽度并使用 padding-top 值定义高度的示例。它在这里不起作用，因为高度是定义值。

我明天将再次发布更新。

我有点绝望。想喝酒（开玩笑）。

Answer 1

问题已得到解答！

我终于使用了“vh”单位，并将其应用于所有正方形的高度和宽度。

是这样的：

.c-squares{
    width:30vh;
    height:30vh;
    display:inline;
}

如此干净，不敢相信我从来不知道“vh”单位。