CSS网格属性-grid-column-start

科技 09-04 来源：兴趣编程网

grid-column-start属性是CSS 网格布局规范的一部分，用于指示网格项目在网格布局中开始的列网格线。此属性（以及其他基于行的放置网格属性）控制网格项的大小及其在网格上的位置。

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

.grid-item:nth-child(2) {
  grid-column-start: 3; /* Item starts on the third column line */
}

基于 CSS Grid 的默认自动放置行为，本示例中网格的第二个子元素应放置在第二列中。但是我们grid-column-start在第三条网格线上声明了一个位置，将网格项移动到第三列并将其起始边缘与第三条网格线对齐。

grid-column-start使用CSS Grid 属性将第二个网格项移动到第三列。

句法

grid-column-start:

完整定义

where
 =
  auto |
   |
  [ [  |  ] && ? ] |
  [ span && [  ||  ] ]

初始值： auto
适用于：网格项和包含块为网格容器的绝对定位框
继承：无
计算值：指定
动画类型：离散

价值观

/* Keyword value */
grid-column-start: auto;

/*  value */
grid-column-start: myLineName;
grid-column-start: myGridArea;

/*  +  values */
grid-column-start: 3;
grid-column-start: -2;
grid-column-start: main-area 2;
grid-column-start: 3 sidebar-start;

/* span +  +  values */
grid-column-start: span 3;
grid-column-start: span main;
grid-column-start: span myarea 5;

/* Global values */
grid-column-start: inherit;
grid-column-start: initial; /* same as `auto` */
grid-column-start: revert;
grid-column-start: revert-layer;
grid-column-start: unset;

auto

这是默认值。它表示默认跨度 ( 1) 和自动放置行为，这意味着网格项会自动放置在下一个可用的空网格单元中。

此语法允许您使用整数来指代编号的网格线或使用字符串来指代命名的网格线或命名的网格区域。换句话说，您可以通过其数字索引或名称来指定网格线到网格项的起始边缘。

按行号定位项目

每个网格轨道之前和之后有两条网格线，并自动为其分配一个数字索引，从第一个开始。

在本文的第一个示例中，我们使用以下语法通过其索引 ( 3) 引用第三个网格线，以使用以下语法将网格项的起始边缘与第三列的起始边缘对齐：

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

请注意，您也可以使用负数来表示网格线，请记住它从网格的结束边缘开始计数。以下代码指向上一个示例中的同一条网格线，但计数相反：

.grid-item:nth-child(2) {
  grid-column-start: -2; /* same as 3 */
}

请注意，负整数已分配给我们的网格以及正整数：

grid-column-start使用CSS Grid 属性将第二个网格项移动到第三列。

按行名称定位项目

您可以使用grid-template-columns和为网格线指定自定义名称，grid-template-rows并使用基于线的放置网格属性通过其名称引用该线。

让我们回到我们的示例并将其所有列跟踪行命名为如下声明：

.grid {
  display: grid;
  grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [last];  
}

我们可以通过自定义名称而不是其索引来引用第三行：

.grid-item:nth-child(2) {
  grid-column-start: third; /* same as index number 3 */
}

请注意，不能span取值，因为span它是网格放置属性的保留关键字（例如grid-column: 1 / span 2）。

按网格区域定位项目

使用该grid-template-areas属性定义网格区域时，您可以根据区域名称免费获得隐式线名称。例如，具有名称的网格区域在它之前和之后sidebar生成一个线名。您可以参考这些线来设置网格项的位置。sidebar-startsidebar-end

.grid-item:nth-child(2) {
  grid-column-start: sidebar-start;
}

或者，您可以参考区域的名称将项目定位在sidebar命名区域的起始行：

.grid-item:nth-child(2) {
  grid-column-start: sidebar;
}

由于您grid-column-start在此示例中使用了该属性，因此浏览器知道您需要该区域的sidebar-start线sidebar；因此，它将网格项目的起始边缘与网格区域的起始边缘对齐。

这是一个完整的例子：

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-areas: "main main sidebar";
}

aside {
  grid-column-start: sidebar-start;
}

这将aside元素的位置设置为sidebar我们网格中的区域。

&& ?

这种语法风格允许您在名称重复时按网格线定位网格项。如果存在同名的网格线，则此语法有助于指定您所指的那些线。

.grid {
  display: grid;
  grid-template-columns: [bar] 1fr [foo] 1fr [bar] 300px [bar];

  /*
    Using repeat() function also gives you repeated named grid line, for example:
    grid-template-columns: repeat(3, [bar] 1fr);
  */
}

假设您要选择第三条线，但该线与第一条和最后一条网格线同名——它们都被称为bar. 由于命名的第二bar条线是第三条网格线，您可以使用2它来选择它作为起点：

.grid-item:nth-child(2) {
  grid-column-start: 2 bar; /* The second `bar` named line which is the third line */
}

注意顺序无关紧要，所以前面的代码也可以这样写：

.grid-item:nth-child(2) {
  grid-column-start: bar 2;
}

与前面的语法一样，您也可以使用负整数从网格的末端边缘开始计算网格线。在我们的示例中，如果我们想引用 first bar，我们可以从网格的结束边缘开始计数，并这样写：

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

请注意，整数值不能为零。

span && [ || ]

此语法允许网格项目跨越网格轨道。它可以用三种不同的方式指定。

请注意，如果在此语法中的任何地方都没有指定整数，则默认值为1.

span

使用span关键字后跟一个整数表示网格项目从特定网格线跨越的轨道数。例如，如果我们想要一个网格项在其起始边缘跨越三个列轨道，我们可以应用以下值：

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

grid-column-start网格项目使用该属性跨越三列。

当我们span用于放置项目的起始线时，从技术上讲，它向后跨越而不是向前跨越到结束边缘，这通常是现实世界场景中发生的情况。

span

您可以结合span网格线的名称来使网格项展开，直到它到达指定的网格线。

.grid-item:nth-child(3) {
  grid-column-start: span thirdline;
  grid-column-end: 6;
}

由于网格项目的结束线是已知的 ( 6)，我们可以将项目跨越到起始线，直到它碰到名为的网格线thirdline。

网格项跨越网格，直到它碰到指定的网格线，thirdline使用grid-column-startCSS 属性命名。

span

如果指定的网格线名称被分配给多条网格线——换句话说，如果我们有重复命名的网格线——我们需要说明我们想要定位哪些网格线。为此，我们可以在值中添加一个整数，指定我们所指的网格线。

以下面的网格为例：

.grid-container {
  display: grid;
  grid-template-columns: [y] 1fr [x] 1fr [x] 1fr [y] 1fr [x] 1fr [x];
}

.grid-item:nth-child(3) {
  grid-column-start: span x 2;
  grid-column-end: 5; /* equivalent to grid-column-end: x 3; */
}

我们将网格项的结束行设置为第五行。然后我们希望它跨越到起始线，直到它碰到一条名为的网格线x。由于我们希望它成为第二x条网格线，我们最终得到grid-column-start: span x 2.

结果，我们的网格项从第五行开始跨越到起始行，如下图所示。它击中的第一行是 named y， next 是第一行x，最后，它击中了所需的第二行 named x。

grid-column-start使用该属性将网格项目的位置从第五行设置回第二个命名行，朝向项目的开始边缘

当您想使用其名称将网格项目跨越到网格线时，此语法很有帮助，但您知道有多个具有该名称的网格线，因此我们添加一个整数来表示我们想要该N网格线的.

定位网格项目可能会生成隐式轨迹

将网格项目的位置设置为网格线的索引或在显式网格中不存在的网格线的名称将强制网格创建隐式轨迹以将该位置添加到网格。

让我们创建一个包含两列的网格，并将其项目的位置设置为不存在的行。在下面的示例中，我们只有两列，我们没有命名任何网格线。因此，没有索引为的5行和名称为的行test，但我们将这些值设置为我们的属性：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 100px;
}

.grid-item {
  gird-column-start: span test;
  grid-column-end: 5;
}

由于我们知道网格中有隐式轨道，并且我们希望它们具有大小以便我们可以看到它们，因此我们将grid-auto-columns属性添加到我们的代码中。

现在我们已经完成了所有设置，让我们看看我们的网格会发生什么：

为网格放置属性提供不存在的值会导致网格创建隐式轨迹以能够定位我们的网格项目

我们设置grid-column-end为5，但我们显式网格的最后一个索引是3，因此，在网格的末尾创建了两个隐式轨道，为我们提供了一条索引为的线5。另一方面，我们将设置为grid-column-start名称为的网格线test。同样，由于我们的网格中没有这样的名称，并且因为我们希望该网格线与网格项的起始边缘对齐，因此在内联中显式网格的起始侧创建了一个隐式列轨道方向，其线为test。

定位网格项目可能会导致孔洞

正如您在前面的示例中可能看到的那样，基于行的定位可能会导致网格项之间出现空白。

如果这些孔在您的设计中不受欢迎，可以通过将grid-auto-flow具有值的属性应用dense到网格容器来轻松处理它们。

该grid-auto-flow 属性可以填充由基于行的定位引起的空白。

堆叠网格项目

当在网格中定位项目时，我们可以将它们堆叠或重叠在一起。这使我们有时可以使用 CSS Grid 作为绝对定位的替代方案。例如，我们可以在不使用position属性的情况下在图像顶部放置一个标题层，如下所示：

figure {
  display: grid;
}

img,
figcaption {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;  
}

默认情况下，网格项按源顺序堆叠，但您可以使用该z-index属性控制它们的级别。在下面的示例中，我们重叠了一些项目，并使用该z-index属性将第二个项目带到最高级别：

.item:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

z-index 使用该属性将第二个网格项置于堆栈顶部。

使用负索引以获得更大的灵活性

在某些情况下，您希望网格中有一个全角项目，这意味着它从第一条网格线开始，到最后一条网格线结束。例如，在四列网格中，结束行索引是5，因此您可以编写下面的代码来获得全角项目。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item.full-width {
  grid-column-start: 1;
  grid-column-end: 5;
}

它就像一个魅力，但如果列数变为六呢？在这种情况下，我们需要更新放置属性的索引值。

灵活的解决方案是使用负索引！

.grid-item.full-width {
  grid-column-start: 1;
  grid-column-end: -1;
}

现在，无论我们有多少列，带有full-width类的网格项总是跨越网格。

网格线索引取决于书写模式

整个网格布局模块基于文档的书写方式；因此，网格线也取决于方向和书写模式。例如，在波斯语和阿拉伯语等从右到左的语言中，第一条带1索引的网格线是网格中最右边的线。

演示书写模式如何影响网格布局的方向及其网格线的索引。

因此，在使用网格线索引来定位网格项目时，请考虑网格的书写方向grid-column-start。

命名区域胜过命名线

如果命名网格区域的名称与线名称相同，则放置算法将优先使用命名网格区域的线。

考虑以下示例：

.container {
  display: grid;
  grid-template-columns: 1fr [y] 1fr 1fr 1fr 1fr;
  grid-template-areas: "x x x y y";
}

第二条网格线命名为y，最后两列定义为同名区域。现在，要定位第一个网格项，我们将y其赋值为grid-column-start. 让我们看看它将引用哪一行：

.item:first-child {
  grid-column-start: y;
}

正如你在下一张图片中看到的，虽然这y条线更靠近第一个项目，但浏览器选择了网格区域的边缘来放置项目的起始边缘。

网格区域和网格线具有相同的名称，y。当您将该名称分配给网格放置属性时，浏览器会在命名的网格线上选择网格区域线。

请注意，如果您使用网格区域的隐式名称行，则这不适用。例如，让我们将前面示例中的网格线名称更改为y-start. 此外，我们知道具有名称的区域y有一个隐含的网格线y-start分配。现在，如果我们设置y-start为grid-column-start，则名为 line 的网格将成为这次的赢家。

.container {
  display: grid;
  grid-template-columns: 1fr [y-start] 1fr 1fr 1fr 1fr;
  grid-template-areas: "x x x y y";
}

.item:first-child {
  grid-column-start: y-start;
}