CSS grid-column-start 属性

CSS grid-column-start 属性用于定义一个网格项目放置在网格容器中的开头位置。它指定了该项目从哪一列开始。

属性值是一个 正整数，表示起始列线号。如果该值是负数或 0，它会被设置为 1。

该属性可与 grid-column-end 属性一起使用，来设置网格列的范围。网格范围可以使用相对行号或相对名称来定义。

在以下的例子中，我们定义两个 div 元素为网格容器的网格项目。将网格项目放在首个列线之后，代码如下：

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: auto;
  grid-gap: 10px;
}

.item1 {
  grid-column-start: 2;
}
.item2 {
  grid-column-start: 2;
}

在该例中，我们创建了一个 3 列网格，每一列的宽度都是 50px。之后，我们定义了两个网格项目，它们的开头列线都是第二根列线。

假设我们还想要让这两个网格项目覆盖第二列和第三列，我们可以使用 grid-column-end 属性来完成此操作。新的 CSS 代码如下：

.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item2 {
  grid-column-start: 2;
  grid-column-end: 4;
}

在这里，我们用 grid-column-start 属性和 grid-column-end 设置了两个网格项目的起始列和结束列。

总的来说，使用 grid-column-start 属性来定义网格项目的起始列非常简单。我们只需要记住一个正整数即可，该整数代表了该项目需要从哪个列开始。