CSS Grid 是一种强大的布局系统，它允许开发者在网页中创造出复杂的布局。但是，在使用 CSS Grid 的时候，我们需要设置单元格的尺寸，以便让网页元素在网页中正确地排列。本文将介绍如何设置 CSS Grid 单元格的尺寸。
CSS Grid 基础
在 CSS Grid 中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如：
---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ------ -
上面的代码将创建一个包含 3 列和 2 行的网格。每列的宽度为 200 像素，每行的高度为 100 像素。
设置单元格尺寸
在 CSS Grid 中，我们可以使用 grid-column 和 grid-row 属性来设置单元格的位置。例如：
----- - ------------ - - -- --------- -- -
上面的代码将把 .item 元素放在第一行的前两列中。
我们还可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来设置单元格的位置。例如：
----- - ------------------ -- ---------------- -- --------------- -- ------------- -- -
上面的代码与前面的代码等效，将把 .item 元素放在第一行的前两列中。
在设置单元格位置的同时，我们可以使用 grid-column-gap 和 grid-row-gap 属性来设置单元格之间的间隔。例如：
---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ------ ---------------- ----- ------------- ----- -
上面的代码将在每列和每行之间添加 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