CSS Grid 布局：如何使用 grid-column 属性实现网格区域的跨度

CSS Grid 布局是一种强大的前端布局方式，能够帮助我们创建复杂的网格布局。其中，grid-column 属性可以帮助我们实现网格区域的跨度，让我们更灵活地进行布局设计。

grid-column 属性介绍

grid-column 属性用于设定元素占据的网格列区域。它可以接受一个值、两个值或三个值，具体用法如下：

• grid-column: <start-line> 占据从 start-line 到下一列的区域。
• grid-column: <start-line> / <end-line> 占据从 start-line 到 end-line 之间的区域。
• grid-column: <start-line> / <end-line> <length> 占据从 start-line 到 end-line 之间的区域，并将该区域的宽度设定为指定的长度值。

start-line 和 end-line 可以接受多种值，如数字、关键字、百分比等。

使用示例

等宽列网格布局

我们可以使用 grid-column 属性实现等宽列网格布局，如下所示：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

// www.javascriptcn.com code example
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #ccc;
  padding: 1rem;
}

上面的代码中，我们使用了 repeat(3, 1fr) 来设定网格布局的列数和大小。接下来，我们可以使用 grid-column 属性来设定每一个子元素占据的列区域。

// www.javascriptcn.com code example
.grid-item:nth-child(1) {
  grid-column: 1 / 2;
}

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

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

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

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

.grid-item:nth-child(6) {
  grid-column: 3 / 4;
}

如此一来，我们就用 grid-column 属性实现了等宽列网格布局，每个子元素都占据了一列，而且还能通过改变每个子元素的 grid-column 属性来改变其占据的列区域。

不等宽列网格布局

除了等宽列网格布局，我们还可以用 grid-column 属性实现不等宽列网格布局，如下所示：

<div class="grid-container">
  <div class="grid-item wide">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item wide">5</div>
  <div class="grid-item">6</div>
</div>

// www.javascriptcn.com code example
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #ccc;
  padding: 1rem;
}

.wide {
  grid-column: 1 / 4;
}

上面的代码中，我们使用了一个 wide 类来标记占据三列的元素。然后，我们使用 grid-column 属性将其占据的列区域设定为 1 / 4，即从第一列到第四列。

这样就实现了不等宽列网格布局，其中第一个和第五个子元素占据了三列，其他子元素占据了一列。

结束语

CSS Grid 布局可以让我们通过简单而强大的方式来创建复杂的网格布局。其中，grid-column 属性可以帮助我们实现网格区域的跨度，让我们更灵活地进行布局设计。在实际开发中，我们可以根据具体需求灵活使用 grid-column 属性来进行网格布局的设计。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d657a1a941bf7134c0f53e