html - css 网格创建具有自动填充功能的空列

Question

该片段应该很好地说明了这一点，但这是我要实现的目标:

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

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

问题在于: 当存在跨行时，以下列表现为自动填充，不 em> 自动调整。该片段显示了跨列的存在如何改变后续列的行为。屏幕截图显示了正在创建的额外列。

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

如有任何建议，我们将不胜感激。谢谢!

* {
  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;
}

<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>

<div class="box box--fit-grid">
  <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>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>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>

<div class="box box--fill-grid">
  <h2 class="box__title">The bottom two boxes should use auto-fill</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>

<div class="box box--fill-grid">
  <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>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>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>

Answer 1

当使用 auto-fit 或 auto-fill 时，容器会影响所有网格项。

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

然后将第一行设置为:

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

锁定在四列中。结果，auto-fit 无法拉伸(stretch)行中的三个后续元素，因为第四列没有折叠。

没有第一项和 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?