如何使用 CSS 网格创建响应式方形网格布局？

使用 CSS Grid 创建正方形网格布局

可以使用 CSS 创建正方形布局，每行有四个正方形网格。为了确保方块即使在屏幕大小调整时也能保持其形状，避免使用固定值至关重要。

示例代码

以下代码演示了如何创建这样的布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
  aspect-ratio: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

说明

• .container 元素设置为显示：grid 并使用四列相等的网格模板width。
• grid-gap 属性在网格之间添加了 5px 的间隙正方形。
• 由 .container div 选择器表示的每个正方形都有红色背景色。
• 现代浏览器支持的纵横比属性用于保持 1:1每个正方形的长宽比，确保无论屏幕尺寸或方向如何，它们都保持正方形。

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