如何使用 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中文網其他相關文章！