使用 CSS Grid 建立正方形網格佈局 可以使用 CSS 建立正方形佈局,每行有四個正方形網格。為了確保方塊即使在螢幕大小調整時也能保持其形狀,避免使用固定值至關重要。 範例程式碼 以下程式碼示範如何建立這樣的版面: 說明 .container 元素設定為顯示:grid並使用四列相等的網格模板width。 grid-gap 屬性在網格之間增加了 5px 的間隙正方形。 由 .container div 選擇器表示的每個正方形都有紅色背景色。 現代瀏覽器支援的縱橫比屬性用於保持 1:1每個正方形的長寬比,確保無論螢幕尺寸或方向如何,它們都保持正方形。