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>
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- --------- ------- ---------------------- --------- ----- --------- ----- - ----- - ----------------- ----- -------- ----- ---------- ----- ----------- ------- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- -- ------------ -- - ------ - --------- -- ------------ -- - ------ - --------- -- ------------ -- - ------ - --------- -- ------------ -- - ------ - --------- - - ---- -- ------------ -- -展开代码
在上面的示例代码中，我们使用了 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
