如何僅使用 CSS 網格建立響應式方形網格佈局？

基於CSS 網格的方形佈局

本問題探討如何創建由正方形組成的CSS 網格佈局，無論屏幕如何，這些正方形都保持其尺寸尺寸。它需要使用CSS網格並禁止固定值尺寸。

解決方案：

您可以使用aspect-ratio屬性來實現此目的：

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

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

縱橫比屬性可確保正方形的寬度和高度始終保持1:1 的比例，從而保留其正方形形狀。

以上是如何僅使用 CSS 網格建立響應式方形網格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！