CSS Grid 布局中如何使用 grid-column 和 grid-row 操作单元格的位置？

CSS Grid 布局是一种强大的布局方式，可以让我们更加灵活地控制网页布局。其中，grid-column 和 grid-row 是操作单元格位置的两个重要属性。本文将详细介绍如何使用这两个属性操作单元格位置，并提供示例代码。

grid-column

grid-column 属性用于指定单元格所占据的列数。它有两种使用方式，一种是指定起始和结束的列数，另一种是指定起始列数和跨度。

指定起始和结束的列数

指定起始和结束的列数是最常见的使用方式。它使用起始列数和结束列数来指定单元格所占据的列数。例如，如果要将一个单元格放在第二列到第四列之间，可以使用以下代码：

.grid-item {
  grid-column: 2 / 4;
}

上述代码中的 2 / 4 表示起始列数为第二列，结束列数为第四列。这样，单元格就会占据第二列、第三列和第四列。如果要将单元格放在第一列，可以将起始列数设置为 1，结束列数设置为 2：

.grid-item {
  grid-column: 1 / 2;
}

指定起始列数和跨度

指定起始列数和跨度是另一种使用方式。它使用起始列数和跨度来指定单元格所占据的列数。例如，如果要将一个单元格放在第二列，并跨越两列，可以使用以下代码：

.grid-item {
  grid-column: 2 / span 2;
}

上述代码中的 span 2 表示跨越两列。这样，单元格就会占据第二列和第三列。如果要将单元格放在第一列，并跨越三列，可以将起始列数设置为 1，跨度设置为 3：

.grid-item {
  grid-column: 1 / span 3;
}

grid-row

grid-row 属性用于指定单元格所占据的行数。它也有两种使用方式，一种是指定起始和结束的行数，另一种是指定起始行数和跨度。

指定起始和结束的行数

指定起始和结束的行数与指定起始和结束的列数类似。它使用起始行数和结束行数来指定单元格所占据的行数。例如，如果要将一个单元格放在第二行到第四行之间，可以使用以下代码：

.grid-item {
  grid-row: 2 / 4;
}

上述代码中的 2 / 4 表示起始行数为第二行，结束行数为第四行。这样，单元格就会占据第二行、第三行和第四行。如果要将单元格放在第一行，可以将起始行数设置为 1，结束行数设置为 2：

.grid-item {
  grid-row: 1 / 2;
}

指定起始行数和跨度

指定起始行数和跨度与指定起始列数和跨度类似。它使用起始行数和跨度来指定单元格所占据的行数。例如，如果要将一个单元格放在第二行，并跨越两行，可以使用以下代码：

.grid-item {
  grid-row: 2 / span 2;
}

上述代码中的 span 2 表示跨越两行。这样，单元格就会占据第二行和第三行。如果要将单元格放在第一行，并跨越三行，可以将起始行数设置为 1，跨度设置为 3：

.grid-item {
  grid-row: 1 / span 3;
}

示例代码

下面是一个使用 grid-column 和 grid-row 属性的示例代码：

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

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

.grid-item {
  background-color: #eee;
  padding: 20px;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.item3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.item6 {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

上述代码中，我们定义了一个 3 列、2 行的网格布局，并为每个单元格指定了 grid-column 和 grid-row 属性。通过这些属性，我们可以轻松地控制单元格的位置和大小。

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