灵活网格

也许 CSS 网格中最棒的技巧是能够编写一个不显式声明行数或列数的列布局，而是根据一些松散的指令和提供的內容自动创建它们。

CSS 网格 就像其他任何东西一样，都有一定的学习曲线，但只要一分钟，就会变得清晰起来。你设置一个网格（实际上是列和行），然后将东西放在这些行上。我认为，它的思维模型比 flexbox 要简单一点。

在这里，我将设置一个网格

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

现在，如果我需要将三个子元素放入该网格中……

<div class="grid">
   <div></div>
   <div></div>
   <div></div>
</div>

它们将完美地落在该网格上。这非常容易，并且提供了大量的控制。可以根据需要调整 1fr 单位。如果第一个是 2fr，它将占用另外两个元素的两倍空间。如果它是 200px，那么它的宽度将正好是 200px。可以调整 gap 的宽度。有很多用于对齐、显式放置和排序的工具。

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 100px 1fr 2fr;
}

不过，我们来考虑一下其他事情。假设只有 2 个子元素。那么，如果我们没有明确指定它们的放置位置，它们将自动落在第 1 列和第 2 列。假设有 5 个子元素。那么，第 4 个和第 5 个子元素将自动向下移动到新的一行。是的，行！到目前为止，我们的网格完全忽略了行，它们只是 隐含的。这方面有一些直观的方面。你无需关心行，它们可以自动创建。你可以显式指定它们，但不是必须。

CSS 技巧在于：除了行之外，我们还可以将这种 “无需关心” 的乐趣扩展到 列 上。

一种方法是通过…

  1. 不设置任何 grid-template-columns
  2. 将自动流从默认的行更改为 grid-auto-flow: column;

现在，将有与子元素数量相同的列数！此外，你仍然可以使用 gap，这很好。

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  margin: 0 0 1rem 0;
}
.grid > div {
  height: 100px;
  background: red;
  min-width: 10px;
}
<div class="grid">
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

但是，我们在这里 丢失 了 换行 功能。如果列数是基于 可以 在不超出父元素宽度的情况下容纳多少个元素，然后对网格的其余部分执行此操作，那就太好了。

这让我们想到了 CSS 网格中也许最有名、最实用的代码

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

还有一个 auto-fill 关键字，它们有点不同，正如 Sara Soueidan 所解释的。

如果你调整此示例的大小，你将看到列数是如何调整的

请查看列数是如何根据可用宽度调整的

另请注意，这里使用的最小值为每列 200px。这只是一个你认为对你的內容而言合适的数字。如果该数字是 400px，你可能需要考虑进行一些调整，使其在屏幕本身小于该宽度时能够变小。我第一次从 Evan Minto 那里看到这个技巧

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

这表示，如果 100% 宽度计算结果小于 10rem（否则为最小值），则使用该值，使其更适合小屏幕布局。

© 2024 . All rights reserved.