隐式链接隐式链接_如何在CSS网格上使用隐式跟踪大小

隐式链接隐式链接

到目前为止， 我们CSS网格教程主要集中于显式值-我们已明确定义的轨道大小。 我们使用了200px高的行，或者使用了1fr宽的列，并明确说明了我们想要多少行。 但是，如果我们不知道（或不想提交）想要的曲目数量怎么办？ 这就是隐式值起作用的地方-让我们来看一下。

入门网格

这是一个基本网格，您可以分叉进行操作。 它为我们提供了一个网格容器，其中包含9个网格项目。 尚未定义列的宽度或数量，因此每个项目都填充了可用的最大宽度：

仅定义一列

假设我们要在左侧留一列，并且确切知道我们需要的宽度：300px。 我们可以通过添加grid-template-columns: 300px;来定义grid-template-columns: 300px; 到我们的网格容器。 但是除非明确定义它们，否则我们将不会获得其他任何列：

也就是说，除非我们说我们要将其中一个网格项放置在（例如）第1行的第3列中：

.item-3 {
  grid-column: 3;
  grid-row: 1;
}

然后，这为我们提供了超出已定义网格的额外列，因为CSS Grid将使用可用空间及其自动放置算法来确定其他所有内容。

这很棒，即使我们想要有更多的列，Grid也会做出假设，而不必定义每个列。 但是，如果我们希望这些隐含的轨道（无论有多少轨道）具有特定的宽度，该怎么办？ 这就是grid-auto-columns起作用的地方。

对网格自动列说“你好”

如果我们希望除第一列外的所有列都为100px宽，我们可以隐式声明：

grid-auto-columns: 100px;

结合我们的显性价值，我们可以两全其美。 在这里，我们要说的是，我们希望第一1fr （它会占用1fr空间的一小部分– auto在这里会产生相同的效果），此后的任何其他列都应精确为100px ：

grid-template-columns: 1fr;
grid-auto-columns: 100px;

这给我们以下内容：

而且，如果我们声明第3项实际上应该放在第1行的第5列中，则Grid知道添加任何其他列的宽度，因为它暗示了这一点。

我们也不限于这里的像素值。 我们可以使用分数单位，em单位，甚至可以使用我们在之前的教程中讨论过的minmax()表示法。

不忘记网格自动行

几乎不用说， grid-auto-rows对行的作用与grid-auto-columns对列的作用相同。 这是一个示例，其中除前两行外的所有行都固定在200px的高度上。

结论

Grid的许多属性都有默认值，以防万一您没有定义其他任何东西，但是在某些情况下，我们至少需要暗示我们想要的。 通过隐式轨道大小调整，我们可以暗示如果需要，任何额外的行或列应该是什么大小。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-implicit-track-sizing-on-your-css-grid--cms-31429

隐式链接隐式链接