gpt4 book ai didi

html - 如何设置CSS网格列的最大宽度

转载 作者:搜寻专家 更新时间:2023-10-31 22:54:25 24 4
gpt4 key购买 nike

<分区>

我有一个 CSS 网格,当有很多元素时,它看起来和工作起来都很棒。但是,当有 1、2 或 3 个元素时,卡片会被拉伸(stretch)。

我尝试为每张卡片设置 max-width,但列的宽度保持不变。有没有办法设置每列的 max-width ?只有当有 3 列或更少时,我才需要使用它。 (我对 css 网格很陌生)

.big-container {
padding: 0 10%;
}

.header {
width: 100%;
height: 50px;
background-color: blue;
}
.container {
border: 1px solid black;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
.box {
border: 1px solid black;
height: 30px;
background-color: yellow;
}
<div class="big-container">
<div class="header"></div>
<p>Text</p>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</div>
</div>

谢谢!

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com