将“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;
}

应该可以！