如何使用 CSS 网格创建具有等大小正方形的响应式 4 列网格布局？

CSS网格方格布局

想要创建一个由方格组成的网格布局，每行包含四个方格。这些方格在屏幕大小改变时不会变形，且始终保持相同的宽度和高度（不希望使用固定值）。必须使用 CSS 网格。以下是如何实现：

使用 CSS，可以通过伪元素来始终保持宽高比为 1:1，或者使用新属性 aspect-ratio，例如：

.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>

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