如何创建等大小正方形的响应式 CSS 网格布局？

CSS 网格方形布局

这个问题探讨了创建由正方形组成的 CSS 网格布局的复杂性，其中每个正方形都保留其长宽比在屏幕调整大小期间。

实现布局

要实现此布局，请考虑以下 CSS 代码：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

理解代码

• 显示： grid;：激活容器的网格布局element.
• grid-template-columns: 1fr 1fr 1fr 1fr;: 定义一个具有四列等宽的网格（1fr = 可用空间的一小部分）。
• grid-gap: 5px ;: 设置网格单元之间的 5 像素间隙。
• background-color: red;: 使用红色背景。
• aspect-ratio: 1;：保持每个单元格的长宽比为1:1。此属性可确保无论屏幕大小如何，正方形都保持正方形。

此方法允许您创建正方形网格，在调整大小期间保留其纵横比，从而提供灵活且响应灵敏的布局。

以上是如何创建等大小正方形的响应式 CSS 网格布局？的详细内容。更多信息请关注PHP中文网其他相关文章！