CSS 网格环绕

Question

是否可以在不使用媒体查询的情况下制作 CSS 网格包装？

在我的情况下，我有一个不确定的项目数量，我想放置在一个网格中，我希望该网格能够换行。使用 Flexbox，我无法可靠地很好地分隔事物。我也想避免一堆媒体查询。

这是 一些示例代码：

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

 <div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

这是一张 GIF 图片：

作为旁注，如果有人能告诉我如何避免指定所有项目的宽度，就像我使用 grid-template-columns 那样，那就太好了。我希望孩子们指定自己的宽度。

原文由 kentcdodds 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 auto-fill 或 auto-fit 作为 repeat() 符号的第一个参数。

<auto-repeat> repeat() 符号的变体：

 repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

---

auto-fill

当给定 auto-fill 作为重复次数时，如果网格容器在相关轴上有 确定 的尺寸或最大尺寸，那么重复次数是不导致网格溢出的最大可能正整数它的网格容器。

https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

 <div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

网格将重复尽可能多的轨道而不会溢出其容器。

在这种情况下，给定上面的示例 （见图） ，只有 5 个轨道可以容纳网格容器而不会溢出。我们的网格中只有 4 个项目，因此在剩余空间内将第五个项目创建为空轨道。

剩余的空间，轨道#6，结束显式网格。这意味着没有足够的空间来放置另一条轨道。

---

auto-fit

auto-fit 关键字的行为与 auto-fill 相同，只是在 放置网格项目 后，任何空的重复轨道都会折叠。

https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

 <div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

网格仍将重复尽可能多的轨道而不会溢出其容器，但空轨道将折叠为 0 。

折叠的轨道被视为具有 0px 的固定轨道大小功能。

与 auto-fill 图像示例不同，空的第五个轨道被折叠，在第四个项目之后结束显式网格。

---

auto-fill vs auto-fit

使用 minmax() 函数时，两者之间的差异很明显。

使用 minmax(186px, 1fr) 将项目范围从 186px 到 网格容器中剩余空间的一小部分。

使用 auto-fill 时，一旦没有空间放置空轨道，项目就会增长。

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

 <div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

使用 auto-fit 时，项目将增长以填充剩余空间，因为所有空轨道将折叠为 0px 。

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

 <div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

---

操场：

代码笔

检查自动填充轨道

---

检查自动调整轨道

原文由 Ricky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您想要 auto-fit 或 auto-fill 在 repeat() 函数中：

 grid-template-columns: repeat(auto-fit, 186px);

如果您还使用 minmax() 以允许灵活的列大小，则两者之间的区别变得明显：

 grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

这使您的列可以灵活调整大小，范围从 186 像素到横跨容器整个宽度的等宽列。 auto-fill 将创建适合宽度的列。如果，比如说，五列适合，即使你只有四个网格项目，也会有第五个空列：

使用 auto-fit 将防止空列，必要时进一步扩展您的列：

原文由 keithjgrant 发布，翻译遵循 CC BY-SA 4.0 许可协议