我想创建一个带有响应方块的网格布局.
我觉得我应该能够使用 CSS Grid 布局来做到这一点，但是在将每个正方形的高度设置为等于宽度时遇到了麻烦.
也无法在每个方块之间设置排水沟.
使用 flexbox 会更好吗?
目前我的 HTML 看起来像这样，但会是动态的，所以可能会添加更多的方块.当然，它需要具有响应性，因此最好使用媒体查询将其折叠为一列.
<div class="square"><div class="内容"><div class="square"><div class="内容传播">
<div class="square"><div class="内容栏">
使用 css 网格，这是我得到的
.square-container{显示:网格；网格模板列:30% 30% 30%；.正方形 {}}我能够使用 flexbox 走得更远，并且能够使用 space-between 将正方形与漂亮的排水沟对齐，但仍然在努力使高度与每个正方形的宽度相匹配.
我无法找到任何使用 flexbox 或 grid 完成此操作的示例，但任何示例也将不胜感激.
谢谢
padding-bottom 技巧是最常用的方法.
您可以将它与 Flexbox 和 CSS Grid 结合使用，并且由于使用百分比作为边距/填充会导致 flex/grid 项目的结果不一致(在较旧的浏览器版本中，请参阅下面的编辑说明)，可以添加一个额外的包装器，或者像这里一样，使用伪代码，因此带有百分比的元素不是 flex/grid 项目.
请注意，对规范进行了更新.，现在应该在 flex/grid 项目上使用时给出一致的结果.但请注意，该问题仍然会出现在旧版本上.
注意，如果你将内容添加到content元素，它需要是绝对位置以保持正方形的纵横比.
编辑 2:在评论中，有人问我如何使文本居中，因此我在下面的代码段中添加了该内容.
.square-container {显示:弹性；flex-wrap: 包裹;}.正方形 {位置:相对；flex-basis: calc(33.333% - 10px);边距:5px；边框:1px 实心；box-sizing: 边框框；}.square::before {内容: '';显示:块；填充顶部:100%；}.square .content {位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；显示:弹性；/* 为居中文本添加 */对齐内容:居中；/* 为居中文本添加 */对齐项目:居中；/* 为居中文本添加 */}<div class="square"><div class="内容"><span>一些居中文本</span><div class="square"><div class="内容传播">
<div class="square"><div class="内容栏">
<div class="square"><div class="内容传播">
<div class="square"><div class="内容栏">
CSS 网格版本
.square-container {显示:网格；网格模板列:重复(自动填充，最小最大值(30％，1fr))；网格间距:10px；}.正方形 {位置:相对；边框:1px 实心；box-sizing: 边框框；}.square::before {内容: '';显示:块；填充顶部:100%；}.square .content {位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；}<div class="square"><div class="内容"><div class="square"><div class="内容传播">
<div class="square"><div class="内容栏">
<div class="square"><div class="内容传播">
<div class="square"><div class="内容栏">
I am wanting to create a grid layout with responsive squares.
I feel like I should be able to do this with CSS Grid layout but having trouble setting the height of each square to be equal to the width.
Also having trouble setting a gutter between each square.
Would I be better off using flexbox?
Currently my HTML looks like this but will be dynamic so more squares may be added. And of course it needs to be responsive so will ideally use a media query to collapse it to one column.
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Using css grid, this is as far as I got
.square-container{
display: grid;
grid-template-columns: 30% 30% 30%;
.square {
}
}
I was able to get a bit further with flexbox and able to use space-between to align squares with a nice gutter but was still struggling to get the height to match the width of each square.
I wasn't able to find any examples of this being done with either flexbox or grid but any examples would be appreciated as well.
Thanks
The padding-bottom trick is the most used to accomplish that.
You can combine it with both Flexbox and CSS Grid, and since using percent for margin/padding gives inconsistent result for flex/grid items (on older browser versions, see edit note below), one can add an extra wrapper, or like here, using a pseudo, so the element with percent is not the flex/grid item.
Edit: Note, there's an update made to the specs., that now should give consistent result when used on flex/grid items. Be aware though, the issue still occurs on older versions.
Note, if you will add content to the content element, it need to be position absolute to keep the square's aspect ratio.
Edit 2: In a comment I were asked how to have a centered text, so I added that in below snippet.
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
display: flex; /* added for centered text */
justify-content: center; /* added for centered text */
align-items: center; /* added for centered text */
}
<div class="square-container">
<div class="square">
<div class="content">
<span>Some centered text</span>
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
CSS Grid version
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-gap: 10px;
}
.square {
position: relative;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
这篇关于带有响应方块的网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
