CSS Grid 是一种强大的布局方式，可以轻松地创建网格布局，实现灵活、响应式的布局效果。在 CSS Grid 中，我们可以通过定义网格列和网格行，控制子项的尺寸和位置，以适应各种设备和屏幕尺寸，为用户提供更优质的浏览体验。
什么是 CSS Grid 布局
CSS Grid 布局是一种二维网格布局方式，可以对子项（即网格单元格）进行精确的尺寸和位置控制。与传统的盒模型布局方式相比，CSS Grid 布局具有更丰富的属性和更灵活的布局效果，可以更好地适应复杂的页面结构和各种设备尺寸。
如何定义 CSS Grid 布局
在 CSS Grid 布局中，我们需要先定义网格容器（即父元素）和网格项（即子元素）。网格容器可以使用 display:grid 属性进行定义，而网格项则需要使用 grid-column 和 grid-row 属性进行定义。
例如，下面的代码片段定义了一个简单的网格容器和两个网格项：
<div class="grid-container"> <div class="grid-item">网格项 1</div> <div class="grid-item">网格项 2</div> </div>
// javascriptcn.com 代码示例
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 定义网格列 */
grid-template-rows: 100px 200px; /* 定义网格行 */
}
.grid-item {
grid-column: 1 / 2; /* 占据 1 列 */
grid-row: 1 / 2; /* 占据 1 行 */
}在上面的代码中，我们使用 display:grid 定义了一个网格容器，同时使用 grid-template-columns 和 grid-template-rows 定义了两列和两行。网格项则使用 grid-column 和 grid-row 属性定义了它们在网格中的位置。其中，grid-column 和 grid-row 属性的值可以是网格的行列编号（从 1 开始），也可以是 span 关键字加上列数或行数，表示网格项占据的列数或行数。
如何控制 CSS Grid 布局中子项的尺寸
在 CSS Grid 布局中，控制网格项的尺寸主要有以下两种方式：
1. 使用网格轨道（Grid Track）
网格轨道是指网格行或网格列，我们可以使用它们的属性来控制子项的尺寸。例如，可以使用 grid-column-start 和 grid-column-end 属性指定网格项占据的网格列数，从而控制网格项的宽度。
.grid-item {
grid-column-start: 1; /* 从第 1 列开始 */
grid-column-end: 3; /* 到第 3 列结束 */
}上面的代码表示网格项占据从第 1 列到第 3 列的网格轨道，因此它的宽度为两列的宽度之和。
2. 使用网格单元格（Grid Cell）
网格单元格是指在网格中形成的单元格，它们可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 四个属性共同指定。我们可以通过改变网格单元格的大小来控制网格项的尺寸。
.grid-item {
grid-row-start: 1; /* 从第 1 行开始 */
grid-row-end: 3; /* 到第 3 行结束 */
grid-column-start: 1; /* 从第 1 列开始 */
grid-column-end: 2; /* 到第 2 列结束 */
}上面的代码表示网格项占据第 1 行到第 3 行、第 1 列到第 2 列的网格单元格，因此它的宽度为第 1 列的宽度，高度为第 1 行到第 3 行的高度之和。
如何控制 CSS Grid 布局中子项的位置
与控制子项的尺寸类似，控制子项的位置也有两种方式：使用网格轨道和使用网格单元格。下面我们来分别介绍。
1. 使用网格轨道
使用网格轨道可以轻松控制子项在网格中的水平和垂直位置。我们可以使用 grid-column-start 和 grid-row-start 属性来指定子项的起始网格列和网格行，以确定子项的位置。
.grid-item {
grid-column-start: 1; /* 从第 1 列开始 */
grid-row-start: 1; /* 从第 1 行开始 */
}上面的代码表示子项从第 1 行第 1 列开始定位，在网格中左上角。
2. 使用网格单元格
使用网格单元格可以更精确地控制子项在网格中的位置。我们可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 四个属性指定子项占据的网格单元格，以确定子项的位置。
.grid-item {
grid-row-start: 2; /* 从第 2 行开始 */
grid-row-end: 3; /* 到第 3 行结束 */
grid-column-start: 1; /* 从第 1 列开始 */
grid-column-end: 2; /* 到第 2 列结束 */
}上面的代码表示子项占据第 2 行到第 3 行，第 1 列到第 2 列的网格单元格，因此它的位置在网格中的左下角。
总结
CSS Grid 布局是一种强大灵活的布局方式。掌握它的尺寸和位置控制方式，可以帮助我们轻松实现复杂的响应式布局效果，并支持各种设备和屏幕尺寸。希望本文可以对您了解 CSS Grid 布局的尺寸和位置控制提供一些指导和参考。
示例代码：https://codepen.io/pen/mYXZbW
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb0093f6b2d6eab31bee53