如何建立等大小正方形的響應式 CSS 網格佈局？

CSS 網格方形佈局

這個問題探討了創建由正方形組成的CSS 網格佈局的複雜性，其中每個正方形都保留其長寬比在螢幕調整大小期間。

實現佈局

要實現此佈局，請考慮以下CSS 代碼：

理解代碼

• 顯示： grid;：啟動容器的網格佈局element.
• grid-template-columns: 1fr 1fr 1fr 1fr;: 定義一個具有四列等寬的網格（1fr = 可用空間的一小部分）。
• grid-gap: 5px ;: 設定網格單元之間的 5 像素間隙。
• background-color: red;: 使用紅色背景。
• aspect-ratio: 1;：保持每個單元格的長寬比為1:1。此屬性可確保無論螢幕大小如何，正方形都保持正方形。

此方法可讓您建立正方形網格，在調整大小期間保留其縱橫比，從而提供靈活且響應靈敏的佈局。

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