在此 Stack Overflow 线程中，用户询问如何创建具有垂直和水平方向的响应式正方形布局对齐内容。
最初的解决方案建议使用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: space-around;<br>}</p>
<p>.square {<br> 宽度：100px；<br> 高度：100px；<br> 显示：flex；<br> 对齐项目：中心；<br> 对齐内容：中心；<br>}</p>
<p> @media（最大宽度：768px）{<br> .square {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 50%;}
}
与CSS 的演变，引入了几个新属性来简化方形网格的实现布局：
<br>.container {<br> 显示：网格；<br> 网格模板列：重复（3, 1fr）；<br> 间隙：2 %;<br>}</p>
<p>.square {<br> 纵横比： 1/1;<br> 显示：flex;<br> 对齐项目：中心；<br> 对齐内容：中心；<br> 填充：5%；<br> 背景颜色：#1E1E1E；<br>颜色: #fff;<br>}</p>
<p>.square img {<br> 宽度: 100%;<br> 高度: 100%;<br> 对象适合: 包含;<br> 对象位置: 中心;<br>}</p>
<p>.square.fullImg {<br> 填充: 0 ;<br>}</p>
<p>.square.fullImg img {<br> object-fit: cover;<br>}<br>
最终结果创建一个带有正方形的响应式网格布局，可以包含各种类型的内容，包括文本、图像和列表，同时保持对齐和纵横比。
以上是如何创建内容居中的响应式正方形网格？的详细内容。更多信息请关注PHP中文网其他相关文章！
