如何在CSS中设置Grid布局的网格模板列和行？

Grid 布局是 CSS 中一种强大的布局模式，它允许我们以网格的形式来排列和定位元素。其中，网格模板列和行是 Grid 布局的重要组成部分，它们决定了网格的结构和布局方式。本文将详细介绍如何在 CSS 中设置 Grid 布局的网格模板列和行。

一、网格模板列（grid-template-columns）

1. 定义方式

- 使用关键字：可以使用 `fr`（fraction，分数）、`auto`、`minmax()` 等关键字来定义网格列的宽度。例如，`grid-template-columns: 1fr 2fr 1fr;` 表示将容器分为三列，第一列占 1 份，第二列占 2 份，第三列占 1 份。

- 使用具体像素值：直接指定每列的像素宽度，如 `grid-template-columns: 200px 300px 200px;`。

- 使用百分比：以容器宽度的百分比来定义列的宽度，`grid-template-columns: 25% 50% 25%;` 表示将容器分为三列，分别占容器宽度的 25%、50% 和 25%。

2. 示例代码

```css

.container {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

}

.item1 {

grid-column: 1;

}

.item2 {

grid-column: 2;

}

.item3 {

grid-column: 3;

}

```

在上述代码中，`.container` 元素设置为 Grid 布局，通过 `grid-template-columns` 属性定义了三列，第一列占 1 份，第二列占 2 份，第三列占 1 份。`.item1`、`.item2` 和 `.item3` 分别占据了对应的列。

二、网格模板行（grid-template-rows）

1. 定义方式

- 与网格模板列类似，也可以使用关键字、具体像素值或百分比来定义网格行的高度。

- 例如，`grid-template-rows: 100px auto 200px;` 表示将容器分为三行，第一行高度为 100px，第二行自动适应内容高度，第三行高度为 200px。

2. 示例代码

```css

.container {

display: grid;

grid-template-rows: 100px auto 200px;

}

.item1 {

grid-row: 1;

}

.item2 {

grid-row: 2;

}

.item3 {

grid-row: 3;

}

```

这里，`.container` 元素的 `grid-template-rows` 属性定义了三行的高度，`.item1` 占据第一行，`.item2` 占据第二行，`.item3` 占据第三行。

三、综合使用

可以同时设置网格模板列和行，以创建更复杂的网格布局。例如：

```css

.container {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

grid-template-rows: 100px auto 200px;

}

.item1 {

grid-column: 1;

grid-row: 1;

}

.item2 {

grid-column: 2;

grid-row: 2;

}

.item3 {

grid-column: 3;

grid-row: 3;

}

```

上述代码创建了一个 3 行 3 列的网格布局，每个元素占据相应的行和列。

四、响应式设计

Grid 布局还可以与媒体查询结合使用，实现响应式设计。根据不同的屏幕尺寸，调整网格的布局。例如：

```css

@media screen and (max-width: 768px) {

.container {

grid-template-columns: 1fr;

grid-template-rows: 100px 100px 100px;

}

}

```

在上述代码中，当屏幕宽度小于 768px 时，容器的网格布局变为 1 列 3 行。

通过使用 CSS 的 Grid 布局的网格模板列和行，我们可以轻松地创建各种复杂的布局结构。合理地运用这些属性，可以提高页面的布局效率和灵活性，为用户提供更好的浏览体验。在实际开发中，根据具体需求选择合适的定义方式，并结合其他 CSS 属性进行综合布局设计。