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

具有相同大小的正方形的响应式网格布局

问题：

设计一个由相同大小的正方形组成的响应式网格布局，具有适应性的天沟间距。考虑 CSS 网格和 Flexbox 方法。

解决方案：

带有填充技巧的 CSS 网格：

利用“填充” -bottom”技巧来强制方形比例。添加一个伪元素，其百分比 padding-bottom 对应于所需的方形纵横比（例如 100%）。这模拟了方形容器的固定高度。

.square {
  position: relative;
  ...
  padding-bottom: 100%;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

具有绝对定位的 Flexbox：

使用带有伪元素的 Flexbox 布局。将伪元素的高度设置为正方形长宽比（例如 100%），并将内容绝对定位在正方形容器内。

.square {
  position: relative;
  ...
  flex-grow: 0;
}

.square::before {
  content: '';
  display: block;
  height: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

Gutter Spacing:

对于这两种方法，都将边距或填充应用于方形元素以创建

注意： 确保内容绝对位于方块内以保持宽高比。

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