CSS网格中的放置、跨度和密度
介绍
你在 CSS Grid 中学到的最常见的东西通常与网格容器有关，而不是与网格项有关。 应用于网格容器的通用网格定义对于基本布局结构来说已经足够了。 但是，当您需要对网格的内容进行更多控制时，网格容器的使用会受到限制。
例如，您可能想要一个 4 x 2 的网格，但第一个网格项应占用第 1 列和第 2 列以及第 1 和第 2 行。 或者，当您不知道网格列轨道的运行时总数是多少时，您可能希望一个项目跨越到最后一个网格列轨道。
每个网格项的大小都是预定义的，您需要找到一种方法来相对于网格容器中的其他项调整它们的大小。
在本教程中，您将探索 CSS Grid 中的放置、跨越和密度。
放置网格项目：从这里开始，从那里结束
浏览器中的所有内容都有默认样式，例如 0 或 auto。 在调整自定义值之前，您还可能需要了解其他默认值。 当你有一个网格时，网格项的放置值由 grid-[x]-start 和 grid-[x]-end 定义（其中 x 可以是 column 或 row ）。 值为自动。
当您看到网格布局时，请记住该网格中的每个项目都有一个放置值，无论流程看起来多么对称：
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr)
}
.item {
grid-column-start: auto; /_ default _/
grid-column-end: auto; /_ default _/
grid-row-start: auto; /_ default _/
grid-row-end: auto; /_ default _/
}
放置柱子
让我们从列开始调整这些默认值：
.item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 5;
}
- 我们想要网格中的第一项
.item:nth-child(1) - 从线一开始，
grid-column-start: 1; - 并在 line 5,
grid-column-end: 5;结束
请在此处查看 完整代码 。
放置行
相同的规则适用于行放置：
.item:nth-child(22) {
grid-row-start: 1;
grid-row-end: 4;
}
但是，grid-row-[x] 会将网格项的默认放置重置为从第 1 列和第 1 行开始，然后会发生放置跨越。
您将在此 代码 中看到 22 行离开其位置并在跨越之前向上移动到 1 行。
如果您希望它保持其原始列轨道，那么您必须明确声明：
.item:nth-child(20) {
grid-column-start: 3;
grid-row-start: 5;
grid-row-end: 10;
}
您可以只提供 start 或 end - 您不必成对提供放置属性。 您可以只提供一个，其余的将保持为 auto（默认）。 需要注意的棘手问题是，如果您仅更改 grid-[x]-start 的值，则网格项将从 行 开始，而不是轨道：
.item:nth-child(1) {
grid-column-start: 5;
}
另一方面，如果您仅指定 end，它将从指定的结束值开始并反向跨越网格。 例如，如果您告诉项目 10 在 3 结束，它将从最近的下一行 2 开始并绘制到行 3：
.item:nth-child(10) {
grid-column-end: 3;
}
你可以在这里看到所有的代码。
还有 grid-[x]-start 和 grid-[x]-end 的简写语法，允许您取消 -start 和 -end 代码：
.item {
grid-column: [start] / [end];
grid-row: [start] / [end];
}
以下是一些可以替代我们目前编写的代码示例的示例：
.item {
grid-column: 1 / 5; /__ Line 1 to 5 /
grid-row: 1 / 4; /*_ Line 1 to 4 __/
grid-column: 5 / auto; / Line 5 to 6 *_/
grid-column: auto / 3; /_ Line 2 to 3 _/
}
跨越：从这里开始/结束，取 n
我们一直使用“span”这个词来描述一个放置应该占据的轨道数量。 当我们说行 1 到 5 时，我们是说网格项应该从 1 到 5。 我通常将此称为隐式跨越。
有一个 span 关键字用作值。 使用它时，您可以将其称为显式跨越。 放置和跨越足够灵活，您可以使用隐式和显式跨越作为单个属性的值。
跨越列
让我们先来看看我们如何跨列轨道跨越一个项目：
.item:nth-child(1) {
grid-column: span 5;
}
这是我们编写的第一个示例的替代方案：
.item:nth-child(1) {
grid-column: 1 / 5;
}
但我们可以包括其他细节：
.item:nth-child(1) {
grid-column: span 2 / 5;
}
在这里，我们在 5 结束，跨度 2 向后跟踪。
另一个例子：
.item:nth-child(1) {
grid-column: 2 / span 2;
}
这里我们从列行 2 开始，到列行 4 结束（在 2 跳转之后）。
跨越行
到目前为止，您在本教程中学到的有关行的所有内容都适用，无一例外：
.item:nth-child(1) {
grid-column: 2 / span 2;
/_ highlight line_/
grid-row: span 5
}
我们仍然是第一次跨越，但后来我们跨越了行轴。 浏览器会将框向下绘制，占据五个轨道。
过度放置和跨越
回想一下，我们已经明确定义我们的网格有 5 列。 我们可以从 6 列向上跨越或放置一个项目，如下所示：
.item:nth-child(1) {
grid-column: span 10; /_ 1 _/
grid-column: 1 / 10; /_ 2 _/
grid-column: 7 / 10; /_ 3 _/
grid-column: 1 / span 10; /_ 4 _/
}
将创建隐式轨道以容纳它们。
负整数作为值
负整数与正整数一样有用——它们反转放置或跨越。 因此，放置或跨越将从最后一列或行开始，而不是从第一列或第一行开始。
这些代码片段是直接相反的：
.item:nth-child(1) {
grid-column: 1 / 5
}
.item:nth-child(1) {
grid-column: -1 / -5
}
正如我上面提到的，由于我们从最后开始向后绘制，所以在 1 列中将有项目 2 的空间，因此它被向下推。 我们将研究使用密度来填充在这种情况下创建的这些空间（如果内容不对称）。
有一种方法可以跨越到列或行的末尾，而无需知道网格容器定义了多少列。 当您使用 auto-fill 或 auto-fit 定义动态网格时，这很有用：
.item:nth-child(1) {
grid-column: 1 / -1
}
为行结束或列结束指定 -1 将使网格项目从您提供的任何开始处开始跨越到网格结束（在本例中为第 1 行）。
但是，这不适用于隐式网格。 因此，由于我们在网格容器中只定义了列和行，这不会做任何事情：
.item:nth-child(1) {
grid-row: 1 / -1;
}
为了让它工作，你必须给网格容器一个明确的行定义。 例如：
.container {
grid-template-rows: repeat(10, 30px);
}
密度
在前面的示例中，您会看到一些放置或跨越导致空白区域散布在网格中间。
您可以使用网格容器上的 grid-auto-flow 属性来关闭这些空格，以关闭这些空格：
.container {
grid-auto-flow: dense;
}
您应该注意的一件事是，如果您有需要遵循顺序的对称内容，则使流密集会扭曲该顺序。 如果您想要一个紧凑的设计同时仍然不规则地放置网格项目，这是您必须做出的权衡。
请注意在将项目 1 放置在末尾之后，网格如何返回以继续将 2 放置在轨道的开头。
结论
在本教程中，我们探索了 CSS 网格：放置、跨越和密度。
