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

Question

我有一个定义大小的列(比方说 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>

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

Answer 1

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

div div:last-child {
     grid-column: -1;
     width: 50px;
}

那应该有效!