div {-6ren">
gpt4 book ai didi

css - 将 "repeat"与 "auto-fit"和固定宽度列组合在一个 "grid-template-columns"中

转载 作者:行者123 更新时间:2023-12-04 17:09:39 25 4
gpt4 key购买 nike

我有一个定义大小的列(比方说 50 像素),然后是未确定数量的列,这些列应该在它们之间划分可用空间,最后是另一个 50 像素的列。
我知道如果我事先知道列的总数,这可以实现:

body > div {
grid-template-columns: 50px repeat(3, 1fr) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>

我也知道我可以这样做一个固定大小的列 + n 列:

body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>

但具体情况并不能像这样工作。相反,我在最后留下了一个空列:

body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr)) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>

我想要做的事情可以用网格来实现吗?

最佳答案

从网格模板中删除最后一列。列模板现在看起来像这样:grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));然后添加这个:

div div:last-child {
grid-column: -1;
width: 50px;
}
那应该有效!

关于css - 将 "repeat"与 "auto-fit"和固定宽度列组合在一个 "grid-template-columns"中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69750350/

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