如何使用 CSS Grid 和 Flexbox 在網格佈局中建立響應式方塊？

如何使用響應式方塊建立網格佈局

在本文中，我們將討論如何使用 CSS 建立具有響應式方塊的網格佈局。

CSS 網格方法

對於 CSS 網格，我們可以使用以下組合grid-template-columns 和 padding-bottom 技巧來建立響應式方塊。 padding-bottom 技巧為正方形的填充分配一個百分比值，有效地將其縱橫比設為 1:1。

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.square {
    padding-bottom: 100%;
}

Flexbox 方法

使用 Flexbox，我們可以使用類似的填充- 創建響應方塊的底部技術。我們可以透過為 Flex 項目的填充分配百分比值來將其設定為具有相同的長寬比。

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    padding-bottom: 100%;
}

請注意，這兩種方法都需要使用偽元素或額外的包裝器來確保百分比填充應用於方塊本身，而不是其 Flex 或網格項目。

使用媒體查詢實現回應

折疊將網格佈局調整為較小螢幕上的單列，我們可以使用媒體查詢。

@media (max-width: 768px) {
    .square-container {
        grid-template-columns: 100%;
        flex-direction: column;
    }
}

結論

透過結合這些技術，我們可以創建一個具有響應式方塊的網格佈局，該佈局保持在不同的螢幕尺寸和設備方向上保持一致的寬高比。

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