如何僅使用 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;
}

在提供的HTML 程式碼中，每個「div」元素代表一個正方形：

<div>

採用此方法可確保方形元素保持其縱橫比，並在螢幕大小調整時保持不扭曲。

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