CSS网格创建具有自动填充的空列

Question

该代码段应该可以很好地说明这一点，但这是我想要实现的目标：

我希望第一行是grid-column: 1/-1，以便它跨越网格。第一行并不总是存在。

表格中的其他列应该为grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));，我不知道在任何给定时间会有多少列。

这是问题所在： 当存在跨越行时，以下列的行为为auto-fill，不是 {{1 }}。该片段显示了扩展列的存在如何改变后续列的行为。屏幕截图显示了正在创建的其他列。

您需要全屏运行该代码段才能看到它的实际效果。

任何建议将不胜感激。谢谢！

auto-fit

* {
  box-sizing: border-box;
}

.box__title {
  grid-column: 1 / -1;
}

.box > * {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
  background: white;
}

.box {
  border: 1px solid gray;
  background: #efefef;
  padding: 20px;
  margin: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.box--fit-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.box--fill-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.box--grid > * {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
}

Answer 1

使用auto-fit或auto-fill时，所有网格项中的容器因素。

在布局中，有四个网格项。如图所示，这将创建四个列轨道：

然后将第一行设置为：

.box__title {
  grid-column: 1 / -1;
}

这将锁定四列。结果，auto-fit无法拉伸该行上的后三个项目，因为第四列不会折叠。

没有第一项和grid-column: 1 / -1规则，只有三列，并且auto-fit / auto-fill正常工作。

但是也许您不需要auto-fit或auto-fill。 grid auto-placement algorithm可能足以处理此工作。

.box__title {
  grid-column: 1 / -1;
}

.box--fit-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.box {
  border: 1px solid gray;
  background: #efefef;
  padding: 20px;
  margin: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.box>* {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
  background: white;
}

.box--grid>* {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class="box box--fit-grid">
  <h2 class="box__title">The top two boxes should use auto-fit</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
</div>

jsFiddle demo

更多信息：

• What is the difference between auto-fill and auto-fit?