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 单元格的尺寸和位置。这些属性可以帮助我们创建出复杂的网页布局。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ------ ---------------- ----- ------------- ----- - ----- - ------------------ -- ---------------- -- --------------- -- ------------- -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655344c8d2f5e1655dd002c6