无扩展响应网格
无扩展响应网格
提问于 2022-01-25 18:21:17
我想要创建一个网格，尽可能多的元素，在它的宽度，但不拉伸网格元素，以适应100%的窗口。所以我在auto fill中使用css网格，这几乎是我想要的工作方式。我希望我的网格元素不要被拉伸来填充整个页面(因此它们具有静态宽度)，而是始终具有相同的宽度，如果网格元素没有足够的空间，请在右边填充一个空白(而不是拉伸它们以满足100%的窗口)。
这是我的代码：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}
.cadres {
background-color: red;
}
.cadres:nth-child(2n+1){
background-color: yellow
}<section>
<div class="grid">
<div class="cadres">
a
</div>
<div class="cadres">
b
</div>
<div class="cadres">c</div>
<div class="cadres">d</div>
<div class="cadres">e</div>
</div>
我想要的：
谢谢你的帮助
回答 1
Stack Overflow用户
发布于 2022-01-25 18:40:26
为此使用flex box。将display: grid;更改为display: flex并添加flex-wrap: wrap;。这样，当您的内部div太大，无法容纳剩余的空间时，它们将被移到底部行。
以下是挠曲箱的文档
下面是一个例子：
.grid {
display: flex;
flex-wrap: wrap;
}
.cadres {
background-color: red;
width: 40%;
margin: 5px;
}
.cadres:nth-child(2n+1) {
background-color: yellow;
width: 40%;
margin: 5px;
}<section>
<div class="grid">
<div class="cadres">
a
</div>
<div class="cadres">
b
</div>
<div class="cadres">c</div>
<div class="cadres">d</div>
<div class="cadres">e</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70853747
复制相关文章
相似问题
腾讯云开发者
