CSS 网格中的位置、跨度和密度

介绍

您在 CSS 网格中学到的最常见的东西通常与网格容器有关,而不是网格项目。应用于网格容器的通用网格定义对于基本布局结构来说就足够了。

例如,你可能想要一个 4 x 2 网格,但第一个网格项目应该占据列 1 和 2 以及行 1 和 2,或者你可能想要一个项目延伸到最后一个网格列轨道,当你不知道网格列轨的运行时间总数是什么时。

每个网格项目的大小是预定义的,你需要找到一种方法来使它们与网格容器中的其他项目相比大小。

在本教程中,您将探索 CSS 网格中的位置,范围和密度。

定位网点:从这里开始,到那里结束

浏览器中的所有内容都具有默认风格,例如: '0' 或 'auto'. 在调整为自定义值之前,您可能还需要注意的其他默认值。当您有网格时,网格项目有定义为 'grid-[x]-start' 和 'grid-[x]-end' 的放置值(其中 'x' 可以是 '列' 或 'row')。

当您看到网格布局时,可以帮助记住该网格中的每个项目都有一个放置值,无论流程看起来多么对称:

 1.container {
 2      display: grid;
 3      grid-gap: 10px;
 4      grid-template-columns: repeat(5, 1fr)
 5    }
 6
 7    .item {
 8      grid-column-start: auto; /_ default _/
 9      grid-column-end: auto; /_ default _/
10      grid-row-start: auto; /_ default _/
11      grid-row-end: auto; /_ default _/
12    }

排列列表

让我们调整这些默认值,从列开始:

1.item:nth-child(1) {
2      grid-column-start: 1;
3      grid-column-end: 5;
4    }

我们希望网格中的第一个项目 .item:nth-child(1)
以 line 1 开始, grid-column-start: 1;
以 line 5 结束, grid-column-end: 5;

此分類上一篇: 觀看(完整版)

排列轮子

相同的规则适用于排位:

1.item:nth-child(22) {
2      grid-row-start: 1;
3      grid-row-end: 4;
4    }

但是, grid-row-[x] 将重置网格项目的默认放置,以便从列 1 行和行 1 行开始,然后发生放置范围。

您将在此代码中看到22线离开了位置,并在延伸之前移动到1线。

如果你想让它留在原始列轨道上,那么你必须明确指出:

1.item:nth-child(20) {
2      grid-column-start: 3;
3      grid-row-start: 5;
4      grid-row-end: 10;
5    }

您只能提供开始或结束 - 您不必提供对的放置属性. 您可以只提供一个,其余的将保持为自动 (默认)。

1.item:nth-child(1) {
2      grid-column-start: 5;
3    }

另一方面,如果您只指定终结,它将从指定的终结值开始,并反过来覆盖网格,例如,如果您指示项10以3结束,则它将从最近的下一行2开始,并绘制到行3:

1.item:nth-child(10) {
2      grid-column-end: 3;
3    }

您可以看到所有代码在这里。

还有grid-[x]-start和grid-[x]-end的缩写语法,允许您删除-start和-end代码:

1.item {
2      grid-column: [start] / [end];
3      grid-row: [start] / [end];
4    }

以下是一些可以取代我们迄今为止撰写的代码样本的例子:

1.item {
2      grid-column: 1 / 5; /__ Line 1 to 5 /
3      grid-row: 1 / 4; /*_ Line 1 to 4 __/
4      grid-column: 5 / auto; / Line 5 to 6 *_/
5      grid-column: auto / 3; /_ Line 2 to 3 _/
6    }

延伸: 开始 / 结束这里, 采取 n

我们一直在使用span这个词来描述一个位置应该占用多少条轨道. 当我们说1到5的线条时,我们说网格项目应该从1到5的范围。

有一个范围的关键字作为一个值,当它被用来使用时,你可以将其称为明确的范围。位置和范围足够灵活,以便你可以使用暗示和明确的范围作为单个属性的值。

紧张的列表

让我们先看看如何在列轨道上扩展一个项目:

1.item:nth-child(1) {
2      grid-column: span 5;
3    }

这是我们写的第一个例子的替代品:

1.item:nth-child(1) {
2      grid-column: 1 / 5;
3    }

但我们可以包括额外的细节:

1.item:nth-child(1) {
2      grid-column: span 2 / 5;
3    }

在这里,我们在5结束,而2延伸向后。

另一个例子:

1.item:nth-child(1) {
2      grid-column: 2 / span 2;
3    }

在这里,我们从列线2开始,并在列线4结束(在2跳跃后)。

紧张的轮廓

到目前为止,您在有关行的教程中所学到的所有内容都无例外地适用:

1.item:nth-child(1) {
2      grid-column: 2 / span 2;
3      /_ highlight line_/
4      grid-row: span 5
5    }

我們仍在延伸第一次,但然後我們在延伸在行軸上. 瀏覽器將繪製下面的框佔用五個軌道。

过度放置和紧张

请记住,我们已经明确定义了我们的网格为具有5列,我们可以从6列扩展或放置一个项目如下:

1.item:nth-child(1) {
2      grid-column: span 10; /_ 1 _/
3      grid-column: 1 / 10; /_ 2 _/
4      grid-column: 7 / 10; /_ 3 _/
5      grid-column: 1 / span 10; /_ 4 _/
6    }

默认的轨迹将被创建以容纳他们。

负面整合者作为价值观

负整数和正整数一样有用 - 它们会逆转位置或范围,因此,而不是从第一列或行开始,位置或范围将从最后一列或行开始。

这些代码片段是直接的对立点:

1.item:nth-child(1) {
2      grid-column: 1 / 5
3    }

1.item:nth-child(1) {
2      grid-column: -1 / -5
3    }

由于我们在结束时开始向后绘制,正如我上面提到的那样,在1列中将有2项目的空间,所以它会被推下来,我们将考虑使用密度来填补在这种情况下创造的这些空间(如果内容不是对称)。

有一种方法可以延伸到列或行的尽头,而无需知道网格容器定义了多少列。

1.item:nth-child(1) {
2      grid-column: 1 / -1
3    }

指定-1为行结尾或列结尾将使网格项目延长到网格结尾,从您提供的开始点开始(在这种情况下,行1)。

因此,由于我们在网格容器中只定义了列和行,这不会有什么影响:

1.item:nth-child(1) {
2      grid-row: 1 / -1;
3    }

要使它工作,你需要给网格容器一个明确的行定义,例如:

1.container {
2      grid-template-rows: repeat(10, 30px);
3    }

密度

在之前的例子中,你会看到一些放置或延伸导致空白空间在网格中间散布。

您可以使用网格容器上的网格自动流属性关闭这些空格:

1.container {
2      grid-auto-flow: dense;
3    }

你应该知道的一件事是,如果你有对称的内容需要遵循一个顺序,使流量密集会扭曲这个顺序,这是一个妥协,如果你想要一个紧凑的设计,但仍然不规则地放置网格项目。

注意到在放置项目1后,网格回来继续放置2在轨道的开始。

结论

在本教程中,我们探讨了 CSS 网格:放置,覆盖和密度。