如何使用 Flexbox 或 Grid 建立響應式方塊網格？

響應式正方形網格

顯示響應不同螢幕尺寸並包含垂直和水平對齊內容的正方形網格通過Flexbox 的某些實現或網格。

Flexbox

使用Flexbox，您可以建立靈活的網格，如下所示：

 顯示：flex;<br> flex-wrap: 換行;<br> justify-content: space-around;<br> 對齊內容: start;<br>}<p>.square {<br> flex-grow: 1;<br> 最大寬度：200px；<br> 背景顏色：#f1f111111f ;<br> 邊距： 10px;<br>內邊距：20px;<br> 文字對齊：居中;<br>}</p><p>@media（最大寬度：768px）{<br> .square {</p><pre class="brush:php;toolbar:false">max-width: 100px;

}
}
}

 <div class="square">正方形 1</div>&gt ;<br> <div> <div class="square">正方形3</div>
<br>
</div>

網格

或者，您可以使用網格佈局來更好地控制網格結構：

顯示：網格；<br> 網格模板列：重複（自動調整，最小最大（200px，1fr））； // 定義列數<br> gap: 10px; // 定義網格項目之間的間隙}<p><br>.square {<br> background-color: #f1f1f1;<br> text-align: center;<br> padding: 20px;<br> }</p>

 <div class="square">方格1</div><br> <div> <div class="square">方格3</div>
<br>
</div>

Flexbox 和 Grid 都提供了不同的方法來建立網格回應方塊。兩者之間的選擇取決於您的特定要求和偏好。

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