如何建立內容居中的響應式正方形網格？

響應式正方形網格

在此Stack Overflow 線程中，用戶詢問如何建立具有垂直和水平方向的響應式正方形版面對齊內容。

原始解決方案(2018)

最初的解決方案建議使用CSS display: flex 屬性來創建靈活的佈局，並使用align-items: center 和justify-content: center 屬性將每個內容置中方塊。響應式設計是透過媒體查詢實現的。

<br>.container {<br> display: flex;<br> flex-direction: row;<br> flex-wrap: wrap; <br> justify-content: spacespace-around-content: spacespace-around ;<br>}<p>.square {<br> 寬度：100px；<br> 高度：100px；<br> 顯示：flex；<br> 對齊項目：中心；<br> 對齊內容：中心；<br>}</p><p> @<br> @ （最大寬度：768px）{</p> .square {<pre class="brush:php;toolbar:false">width: 50%;

}
}

更新的解 (2022)

與CSS的演變，引入了幾個新屬性來簡化方形網格的實現佈局：

• 網格：定義容器的網格佈局。
• 縱橫比：指定每個網格項目的縱橫比，確保其保持正方形。
• object-fit：控制影像在方塊內的顯示方式，允許居中和影像擬合行為。

<br>.container {<br> 顯示：網格；<br> 網格模板列：重複（3, 1fr）；<br> 間隙：2 %;}<p><br>.square {<br> 縱橫比： 1/1;<br> 顯示：flex;<br> 對齊項目：中心；<br> 對齊內容：中心；<br> 填充：5%;<br> 背景顏色：#1E1E1E；<br>顏色: # fff;</p>}<p><br>.square img {<br> 寬度: 100%;<br> 高度: 100%;<br> 物件適合: 包含;<br> 物件位置: 中心;</p>}<p><br>.square.fullImg {<br> 填充: 0 ;</p>}<p><br>.square.fullImg img {<br> object-fit: cover;<br>}</p>

最終結果創建一個帶有正方形的響應式網格佈局，可以包含各種類型的內容，包括文字、圖像和列表，同時保持對齊和縱橫比。

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