在 CSS Grid 中设置子项宽度和高度

CSS Grid 是一种用于网格布局的 CSS 模块，它可以让开发者更加简单、灵活地设计网页布局。在 CSS Grid 中，我们可以通过设置子项的宽度和高度来精确控制网格布局的大小和位置。

设置子项宽度

在 CSS Grid 中，我们可以通过 grid-template-columns 属性来设置网格布局的列数和列宽。例如，我们可以使用以下代码来创建一个包含 3 列等宽的网格布局：

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

上述代码中，repeat(3, 1fr) 表示重复 3 次 1fr，即 3 列等宽的列。

如果我们想要设置某一列的宽度，可以使用 grid-template-columns 属性的第二个参数来指定该列的宽度。例如，以下代码将创建一个包含 3 列，其中第一列宽度为 100px，其余两列等宽的网格布局：

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

如果我们想要设置多个列的宽度，可以使用 grid-template-columns 属性的多个参数来指定。例如，以下代码将创建一个包含 3 列，其中第一列宽度为 100px，第二列宽度为 200px，第三列自适应宽度的网格布局：

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px auto;
}

设置子项高度

在 CSS Grid 中，我们可以通过 grid-template-rows 属性来设置网格布局的行数和行高。例如，我们可以使用以下代码来创建一个包含 3 行等高的网格布局：

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

上述代码中，repeat(3, 1fr) 表示重复 3 次 1fr，即 3 行等高的行。

如果我们想要设置某一行的高度，可以使用 grid-template-rows 属性的第二个参数来指定该行的高度。例如，以下代码将创建一个包含 3 行，其中第一行高度为 100px，其余两行等高的网格布局：

.grid-container {
  display: grid;
  grid-template-rows: 100px repeat(2, 1fr);
}

如果我们想要设置多个行的高度，可以使用 grid-template-rows 属性的多个参数来指定。例如，以下代码将创建一个包含 3 行，其中第一行高度为 100px，第二行高度为 200px，第三行自适应高度的网格布局：

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px auto;
}

示例代码

以下是一个使用 CSS Grid 设置子项宽度和高度的完整示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS Grid Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 10px;
    }
    .grid-item {
      background-color: #ccc;
      padding: 10px;
      text-align: center;
    }
    .grid-item:nth-child(1) {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
      height: 200px;
    }
    .grid-item:nth-child(2) {
      grid-column: 3;
      grid-row: 1 / 3;
      width: 200px;
    }
    .grid-item:nth-child(3) {
      grid-column: 1;
      grid-row: 3;
      height: 100px;
    }
    .grid-item:nth-child(4) {
      grid-column: 2;
      grid-row: 3;
      height: 100px;
    }
    .grid-item:nth-child(5) {
      grid-column: 3;
      grid-row: 3;
      height: 100px;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

上述代码中，我们创建了一个包含 3 行 3 列的网格布局，并设置了子项的宽度和高度。其中，第一项跨越了前两列并占据了前两行，第二项占据了第三列并跨越了前两行，第三项高度为 100px，第四项、第五项高度均为 100px。

通过这个示例，我们可以更好地理解如何在 CSS Grid 中设置子项的宽度和高度，并灵活地设计网页布局。

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