CSS 年鉴 → 属性 → G → grid-column

grid-column

Avatar of Mojtaba Seyedi
Mojtaba Seyedi 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分！

grid-column CSS 属性是一个简写，它在一个声明中指定了网格项目在一个网格布局中开始和结束的网格线。

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

.grid-item:nth-child(2) {
  grid-column: 3 / 5; /* Starts on the third column line and ends on the fifth column line */
}

由于 CSS Grid 的默认自动放置行为，本示例中网格的第二个子元素通常会被放置在网格第一行的第二列。但是，由于我们声明了 grid-column 并将其设置为将网格项目的起始边与第三条网格线对齐，将结束边与第五条网格线对齐，因此该项目跨越了第三列和第四列，而不是一列。

使用 grid-column CSS Grid 属性设置第二个网格项目的位置和大小。

组成属性

如前所述，grid-column 属性是一个简写，它组合了两个属性

语法

grid-column: <grid-line> [ / <grid-line> ]?
完整定义 
<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]
  • 初始值：auto
  • 应用于：网格项目和绝对定位的盒子，其包含块是网格容器
  • 继承：否
  • 计算值：如其详细属性所指定
  • 动画类型：离散

此属性可以采用由正斜杠 (/) 分隔的两个值。斜杠之前的数值设置 grid-column-start 属性，而斜杠之后的数值设置 grid-column-end 属性。您可以声明一个不带斜杠的单个值，该值应用于 grid-column-start 属性，并将 grid-column-end 属性设置为 auto。

值

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

/* <custom-ident> value */
grid-column: myLineName;
grid-column: myGridArea;
grid-column: sidebar-start / main-end;

/* <integer> + <custom-ident> values */
grid-column: 3;
grid-column: 2 / -3;
grid-column: main 2;
grid-column: 3 line / 5 line;

/* span + <integer> + <custom-ident> values */
grid-column: span 3;
grid-column: span 2 / 5;
grid-column: 1 / span myline;
grid-column: 2 / span gridline 3;

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

auto

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

<custom-ident>

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

根据行号定位项目

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

A two row grid with four columns. The last two columns in the second row are empty.
仅显示列网格轨道的索引

在本篇文章的第一个示例中，我们使用此语法通过其索引 (3) 来引用第三条网格线，它将网格项目的起始边与第三列的起始边对齐，而其结束边则使用<custom-ident>语法与第五列对齐。

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

请注意，您也可以使用负数来引用网格线，但它从网格的结束边开始计数。以下代码指向前面示例中的相同网格线，但反向计数。

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

请注意，负整数和正整数都已分配给我们的网格。

使用grid-column CSS 属性将第二个网格项目放置到第三列和第四列中。
根据行名称定位项目

您可以使用grid-template-columns和grid-template-rows基于行的网格布局属性为网格线分配自定义名称，以便通过其名称引用该线。

让我们回到我们的示例，并像以下声明一样命名其所有列轨道线。

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

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

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

请注意，<custom-ident>不能采用span值。span是网格布局属性的保留关键字（例如，grid-column: 1 / span 2）。

根据网格区域定位项目

使用grid-template-areas属性定义网格区域时，您可以免费获得隐式行名，这些行名基于区域的名称。例如，名称为content的网格区域会在其前面生成一条名为content-start的行，在其后面生成一条名为content-end的行。您可以参考这些行来设置网格项目的位置。

.grid-item:nth-child(2) {
  grid-column: content-start / content-end;
}

或者，您可以参考区域的名称，将项目定位到名为content区域的起始行和结束行。

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

这是一个完整的示例。

<body>
  <main></main>
  <aside></aside>
</body>
body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-areas: "content content sidebar";
}

main {
  grid-column: content;
}

这将<main>元素的位置设置为我们网格中的content区域。

Single row grid with two columns.
使用grid-column CSS 属性将 main 元素放置到 content 区域。

<integer> && <custom-ident>?

这种语法的风格允许您在网格线名称重复时通过网格线定位网格项目。如果存在具有相同名称的网格线，则此语法有助于指定您正在引用的哪条线。

.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: 2 bar; /* The second `bar` named line which is the third line */

  /* This is equivalent to */
  grid-column-start: 2 bar;  
  grid-column-end: auto;  
}
Single row grid with three columns. The second column is empty.

请注意，顺序无关紧要，因此前面的代码也可以这样写。

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

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

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

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

span && [ <integer> || <custom-ident> ]

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

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

span <integer>

使用span关键字后跟一个整数表示网格项目从特定网格线跨越的轨道数。例如，如果我们希望网格项目向其结束边跨越三个列轨道，我们可以应用以下值。

.grid-item:nth-child(2) {
  grid-column: auto / span 3;
}
A two row grid with 5 columns. The second grid item spands the middle three columns in the first row.
网格项目使用grid-column CSS 属性跨越三列。
span <custom-ident>

也可以将span关键字与网格线的名称组合使用，使网格项扩展到指定的网格线。

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

由于网格项的起始行已知（3），因此可以将该项扩展到名为lastline的网格线。

Two row grid with five columns. The third grid item spans the last three columns in the first row.
使用grid-column CSS 属性，网格项跨越网格，直到到达名为 lastline 的指定网格线。
span <custom-ident> <integer>

如果指定的网格线名称分配给多个网格线（换句话说，如果我们有重复命名的网格线），则需要说明要定位哪些网格线。为此，可以向我们的值添加一个整数，以指定要引用的网格线。

以以下网格为例

.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: 2 /span x 2;
}

我们将网格项的起始行设置为第二行。然后我们希望它向前扩展，直到到达名为x的网格线。并且由于我们希望它是第二个x网格线，所以最终得到span x 2。

结果，我们的网格项从第二行开始扩展，如下所示。它遇到的第一条线是第一条，x，然后是y，最后，它到达了所需的第二条线，名为x。

Three row grid with five columns.
使用grid-column CSS 属性将网格项的位置从第二行设置为名为x的第二行

当您想使用网格线的名称将其扩展到网格线时，此语法很有用。但请注意，使用此方法，有多条网格线具有相同的名称，因此我们添加一个整数来说明我们想要该网格线的第N条。

有关这些单个属性的语法的更多信息和示例，请参阅grid-column-start和grid-column-end。

示例

让我们看看一些可以使用grid-column的不同场景。

全版布局

有时我们希望文本变窄并居中，但图像或视频等元素扩展到视口的边缘。这种布局称为全版布局。

Demonstrating a full bleed layout that has the text centered but the image extends to the very edge.

考虑以下 HTML

<article>
  <h1></h1>
  <p></p>
  <img src="bridge.webp" alt="A brightly-lot floating bridge against the night sky.">
  <p></p>
</article>

为了使用 CSS Grid 创建此布局，我们设置了一个三列网格

article {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}

现在，我们需要将<article>的所有子元素放置在第二列中，并将<img>的起始边缘与第一条网格线对齐，其结束边缘与最后一条线对齐

article > * {
  grid-column: 2 / 3;
}
article > img {
  grid-column: 1 / -1;
}

您可以在下图中看到结果

Show the grid lines of an article layout that contains an image that spans edge to edge.
使用grid-column CSS 属性将图像元素设置为跨越所有网格列，而其他元素位于第二列。

全版布局的完整代码段如下所示 CSS 代码

.content {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}
.content > * {
  grid-column: 2 / 3;
}
.full-bleed {
  grid-column: 1 / -1;
}

堆叠网格项

在跨网格定位项目时，可以将其堆叠或重叠在彼此之上。这使我们能够有时使用 CSS Grid 作为绝对定位的替代方案。例如，我们可以将字幕层放在图像顶部，而无需使用position属性，如下所示

<figure>
  <img src="image.png" alt="how dare you leave alt empty?">
  <figcaption>The caption of our image</figcaption>
</figure>
figure {
  display: grid;
}

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

以下是我们得到的结果

Cabin in the woods with a green to blue gradient overlay and the words the caption of our image on top.

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

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}
Four overlapping grid items in a five-by-five grid.
使用z-index CSS 属性将第二个网格项置于堆栈顶部

可访问性

使用网格放置属性时需要注意的一件事是由重新排列项目引起的问题。当您更改项目的顺序时，只会更改网格项目的视觉顺序，并且该顺序可能与原始文档顺序不同。这可能会导致在键盘上通过文档选项卡或收听以与 HTML 相同的顺序读取内容的屏幕阅读器的人员遇到非常糟糕的体验。

因此，当元素的 HTML 顺序很重要时，请避免更改网格项目的顺序。例如，对于随机图像库来说可能是好的，但对于表单输入来说可能就不那么好了。

但是，在撰写本文时，有一个提案来解决此问题，希望将来能够解决此问题。

演示

您可以在演示中更改网格放置属性的值，以查看第三个网格项目发生了什么变化

浏览器支持

更多信息

嘘！ 创建一个DigitalOcean账户，并获得200美元免费信用额度用于基于云的托管和服务。
此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 css-tricks.cn. All rights reserved.