具有响应方块的网格布局 [英] A grid layout with responsive squares
问题描述
我觉得我应该可以用CSS Grid layout来做到这一点，但是在设置高度每个方块的宽度等于宽度。
在每个方块之间设置一个装订线也有困难。
使用flexbox会更好吗？
目前我的HTML看起来像这样，正方形可能被添加。当然，它需要有响应，所以理想情况下，使用媒体查询将其折叠到一列。
< div class = 方形容器 >
< 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>
使用CSS网格，这是我得到的
.square-container {
display：grid;
grid-template-columns：30％30％30％;
.square {
}
}
我能够进一步了解flexbox，并能够使用空格将方格对齐到一个很好的阴沟，但仍然在努力使高度与每个方格的宽度相匹配。
我无法找到flexbox或grid的任何示例，但也可以使用任何示例。
感谢
您可以将它与Flexbox和CSS Grid结合使用，填充给出的flex / grid项目不一致的结果，可以添加一个额外的包装，或像这里，使用伪，所以百分比的元素不是flex / grid项目。
注意，如果你将内容添加到
内容元素，它必须是绝对位置以保持广场的宽高比。 $ b
.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：'';显示：块; padding-top：100％;}。square .content {position：absolute;顶部：0;左：0;身高：100％ width：100％;}
< div class =方形容器> < 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>
$ b $ hr b
CSS Grid版本
.square-container {display：grid; grid-template-columns：repeat（自动填充，minmax（30％，1fr））; grid-gap：10px;}。square {position：relative; border：1px solid; box-sizing：border-box;}。square :: before {content：'';显示：块; padding-top：100％;}。square .content {position：absolute;顶部：0;左：0;身高：100％ width：100％;}
< div class =方形容器> < 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>
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, one can add an extra wrapper, or like here, using a pseudo, so the element with percent is not the flex/grid item.
Note, if you will add content to the content element, it need to be position absolute to keep the square's aspect ratio.
.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%;
}
<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>
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屋！
