CSS Grid 布局中的行高、列宽、元素间距详解-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 布局是一种强大的布局系统，它可以让我们轻松地创建复杂的网格布局，并且具有灵活性和可扩展性。在使用 CSS Grid 布局时，我们需要了解一些基本的概念，如行高、列宽和元素间距。本文将详细介绍这些概念，并提供示例代码和实用的指导意义。

行高和列宽

在 CSS Grid 布局中，行高和列宽是指网格中行和列的大小。我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。这两个属性都接受一个值列表，每个值表示一个网格行或列的大小。

定义固定大小的行和列

我们可以使用像素或百分比等单位来定义固定大小的行和列。例如，下面的代码将创建一个包含两行和两列的网格，每个网格单元格的大小为 100 像素：

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

我们也可以使用百分比来定义行和列的大小。例如，下面的代码将创建一个包含两行和两列的网格，每个网格单元格的大小为容器宽度的 25%：

.grid {
  display: grid;
  grid-template-rows: 25% 25%;
  grid-template-columns: 25% 25%;
}

定义自适应大小的行和列

除了固定大小的行和列，我们还可以定义自适应大小的行和列。自适应大小的行和列会根据网格容器的大小自动调整大小。我们可以使用 auto 关键字来定义自适应大小的行和列。例如，下面的代码将创建一个包含三行和两列的网格，第一行和第二行的高度为 100 像素，第三行的高度为自适应大小：

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

同样，我们也可以定义自适应大小的列。例如，下面的代码将创建一个包含两行和三列的网格，第一列和第二列的宽度为 100 像素，第三列的宽度为自适应大小：

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

元素间距

在 CSS Grid 布局中，元素间距是指相邻网格单元格之间的间距。我们可以使用 grid-row-gap 和 grid-column-gap 属性来定义元素间距。这两个属性都接受一个值，表示相邻网格单元格之间的间距大小。

例如，下面的代码将创建一个包含三行和三列的网格，每个网格单元格的大小为 100 像素，相邻网格单元格之间的间距为 20 像素：

.grid {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

我们也可以使用 grid-gap 属性来同时定义行和列的元素间距。例如，下面的代码将创建一个包含三行和三列的网格，每个网格单元格的大小为 100 像素，相邻网格单元格之间的间距为 20 像素：

.grid {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 20px;
}

示例代码

下面是一个完整的示例代码，演示如何使用 CSS Grid 布局来创建一个包含三行和三列的网格，每个网格单元格的大小为 100 像素，相邻网格单元格之间的间距为 20 像素：

// www.javascriptcn.com code example
<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 20px;
}

.cell {
  background-color: lightgray;
  padding: 20px;
  font-size: 24px;
  text-align: center;
}
</style>

指导意义

CSS Grid 布局是一种强大的布局系统，它可以让我们轻松地创建复杂的网格布局，并且具有灵活性和可扩展性。了解行高、列宽和元素间距的概念，可以帮助我们更好地使用 CSS Grid 布局。在实际项目中，我们可以根据具体情况选择固定大小的行和列或自适应大小的行和列，以及合适的元素间距，来创建符合需求的网格布局。

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

CSS Grid 布局中的行高、列宽、元素间距详解