如何使用 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> 背景颜色：#f1f1f1；<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> </p><div> <div class="square"> 正方形3</div><br></div>

网格

或者，您可以使用网格布局来更好地控制网格结构：

 显示：网格；<br> 网格模板列：重复（自动调整，最小最大（200px，1fr））； // 定义列数<br> gap: 10px; // 定义网格项之间的间隙<br>}<p>.square {<br> background-color: #f1f1f1;<br> text-align: center;<br> padding: 20px;<br> }

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

Flexbox 和 Grid 都提供了不同的方法来创建网格响应方块。两者之间的选择取决于您的具体要求和偏好。

登录后复制