CSS Grid 布局中如何设置单元格的位置和大小？-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 布局是一种强大的网格布局系统，它可以让我们更轻松地创建复杂的页面布局。在使用 CSS Grid 布局时，我们可以通过设置网格单元格的位置和大小来控制布局。本文将介绍如何在 CSS Grid 布局中设置单元格的位置和大小，并提供示例代码和指导意义。

设置单元格的位置

在 CSS Grid 布局中，我们可以使用 grid-row 和 grid-column 属性来设置单元格的位置。grid-row 属性用于设置单元格所占据的行数，grid-column 属性用于设置单元格所占据的列数。这两个属性都可以接受一个值或两个值。

如果我们只给 grid-row 或 grid-column 属性传递一个值，则表示单元格只占据一个单元格。例如，下面的代码将一个单元格放置在第一行第一列：

.item {
  grid-row: 1;
  grid-column: 1;
}

如果我们给 grid-row 和 grid-column 属性都传递两个值，则表示单元格占据多个单元格。第一个值表示单元格的起始位置，第二个值表示单元格的结束位置。例如，下面的代码将一个单元格放置在第一行第一列到第二行第二列：

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

我们还可以使用 span 关键字来设置单元格的位置。span 关键字可以接受一个值，表示单元格所占据的单元格数。例如，下面的代码将一个单元格放置在第一行第一列，占据两列：

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

设置单元格的大小

在 CSS Grid 布局中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来设置单元格的大小。这两个属性都可以接受一个值、多个值或一个重复函数。

如果我们给 grid-template-rows 或 grid-template-columns 属性传递一个值，则表示所有单元格的大小都相同。例如，下面的代码将所有单元格的行高设置为 100 像素，列宽设置为 200 像素：

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

如果我们给 grid-template-rows 或 grid-template-columns 属性传递多个值，则表示每个单元格的大小都不同。例如，下面的代码将第一行的行高设置为 100 像素，第二行的行高设置为自动高度，第一列的列宽设置为 200 像素，第二列的列宽设置为自动宽度：

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

我们还可以使用重复函数来设置单元格的大小。重复函数接受两个参数，第一个参数表示重复次数，第二个参数表示单元格大小。例如，下面的代码将每行都重复三次，每列都重复两次：

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(2, 200px);
}

示例代码

下面是一个使用 CSS Grid 布局的示例代码，展示了如何设置单元格的位置和大小：

<div class="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 class="item item6">6</div>
</div>

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

.item {
  background-color: #eee;
  padding: 20px;
  font-size: 24px;
  text-align: center;
}

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

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

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

.item4 {
  grid-row: 1;
  grid-column: 4;
}

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

.item6 {
  grid-row: 1 / span 2;
  grid-column: 5;
}

在上面的示例代码中，我们使用了 grid-template-rows 和 grid-template-columns 属性来设置单元格的大小，使用 grid-row 和 grid-column 属性来设置单元格的位置。同时，我们还设置了网格之间的间距。

指导意义

CSS Grid 布局是一种强大的网格布局系统，它可以让我们更轻松地创建复杂的页面布局。在使用 CSS Grid 布局时，我们需要学习如何设置单元格的位置和大小，这是掌握 CSS Grid 布局的关键。本文介绍了如何在 CSS Grid 布局中设置单元格的位置和大小，并提供了示例代码和指导意义，希望可以帮助读者更好地理解和使用 CSS Grid 布局。

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

CSS Grid 布局中如何设置单元格的位置和大小？

设置单元格的位置

设置单元格的大小

示例代码

指导意义

接着读