CSS Grid 布局 grid-column代码讲解

grid-column 是 CSS Grid 布局中用来定义子元素的列位置的属性。下面是一个简单的代码示例：

<div class="grid-container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

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

.item2 {
  grid-column: 4/7;
}

.item3 {
  grid-column: 7/10;
}

.item4 {
  grid-column: 10/13;
}

.item5 {
  grid-column: 2/span 6;
}

在上面的代码中，我们首先定义了一个网格容器 .grid-container，并设置了它的列模板为 12 列。之后定义了 5 个子元素 .item1 到 .item5，并分别使用 grid-column 属性来指定它们所要占据的列。

例如，.item1 的 grid-column 属性的值为 1/4，表示该元素占据网格容器的第 1 列到第 3 列（即第 1、2、3 列）。同理，.item2 的 grid-column 属性的值为 4/7，表示该元素占据网格容器的第 4 列到第 6 列，以此类推。

需要注意的是，grid-column 属性的值可以使用数字或关键字来表示。例如，我们在上面的代码中还使用了 span 关键字来设置 .item5 元素横跨 6 列，即 grid-column: 2/span 6;。这表示该元素从第 2 列开始，并一直占据后续的 6 列。

最终，我们得到了一个 12 列的网格布局，其中每个子元素占据了不同的列位置。通过灵活设置 grid-column 属性，我们可以轻松地实现各种复杂的布局效果。