CSS Grid 如何设置单元格尺寸？

CSS Grid 是一种强大的布局系统，它允许开发者在网页中创造出复杂的布局。但是，在使用 CSS Grid 的时候，我们需要设置单元格的尺寸，以便让网页元素在网页中正确地排列。本文将介绍如何设置 CSS Grid 单元格的尺寸。

CSS Grid 基础

在 CSS Grid 中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如：

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

上面的代码将创建一个包含 3 列和 2 行的网格。每列的宽度为 200 像素，每行的高度为 100 像素。

设置单元格尺寸

在 CSS Grid 中，我们可以使用 grid-column 和 grid-row 属性来设置单元格的位置。例如：

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

上面的代码将把 .item 元素放在第一行的前两列中。

我们还可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来设置单元格的位置。例如：

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

上面的代码与前面的代码等效，将把 .item 元素放在第一行的前两列中。

在设置单元格位置的同时，我们可以使用 grid-column-gap 和 grid-row-gap 属性来设置单元格之间的间隔。例如：

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

上面的代码将在每列和每行之间添加 20 像素和 10 像素的间隔。

总结

在使用 CSS Grid 的时候，我们需要设置单元格的尺寸，以便让网页元素在网页中正确地排列。本文介绍了如何使用 grid-template-columns、grid-template-rows、grid-column、grid-row、grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column-gap 和 grid-row-gap 属性来设置 CSS Grid 单元格的尺寸和位置。这些属性可以帮助我们创建出复杂的网页布局。

示例代码：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655344c8d2f5e1655dd002c6