Grid 布局是 CSS 中一種強(qiáng)大的布局模式，它允許我們以網(wǎng)格的形式來排列和定位元素。其中，網(wǎng)格模板列和行是 Grid 布局的重要組成部分，它們決定了網(wǎng)格的結(jié)構(gòu)和布局方式。本文將詳細(xì)介紹如何在 CSS 中設(shè)置 Grid 布局的網(wǎng)格模板列和行。

一、網(wǎng)格模板列（grid-template-columns）

1. 定義方式

- 使用關(guān)鍵字：可以使用 `fr`（fraction，分?jǐn)?shù)）、`auto`、`minmax()` 等關(guān)鍵字來定義網(wǎng)格列的寬度。例如，`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` 元素設(shè)置為 Grid 布局，通過 `grid-template-columns` 屬性定義了三列，第一列占 1 份，第二列占 2 份，第三列占 1 份。`.item1`、`.item2` 和 `.item3` 分別占據(jù)了對應(yīng)的列。

二、網(wǎng)格模板行（grid-template-rows）

1. 定義方式

- 與網(wǎng)格模板列類似，也可以使用關(guān)鍵字、具體像素值或百分比來定義網(wǎng)格行的高度。

- 例如，`grid-template-rows: 100px auto 200px;` 表示將容器分為三行，第一行高度為 100px，第二行自動(dòng)適應(yīng)內(nèi)容高度，第三行高度為 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` 占據(jù)第一行，`.item2` 占據(jù)第二行，`.item3` 占據(jù)第三行。

三、綜合使用

可以同時(shí)設(shè)置網(wǎng)格模板列和行，以創(chuàng)建更復(fù)雜的網(wǎng)格布局。例如：

```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;

}

```

上述代碼創(chuàng)建了一個(gè) 3 行 3 列的網(wǎng)格布局，每個(gè)元素占據(jù)相應(yīng)的行和列。

四、響應(yīng)式設(shè)計(jì)

Grid 布局還可以與媒體查詢結(jié)合使用，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。根據(jù)不同的屏幕尺寸，調(diào)整網(wǎng)格的布局。例如：

```css

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

.container {

grid-template-columns: 1fr;

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

}

}

```

在上述代碼中，當(dāng)屏幕寬度小于 768px 時(shí)，容器的網(wǎng)格布局變?yōu)?1 列 3 行。

通過使用 CSS 的 Grid 布局的網(wǎng)格模板列和行，我們可以輕松地創(chuàng)建各種復(fù)雜的布局結(jié)構(gòu)。合理地運(yùn)用這些屬性，可以提高頁面的布局效率和靈活性，為用戶提供更好的瀏覽體驗(yàn)。在實(shí)際開發(fā)中，根據(jù)具體需求選擇合適的定義方式，并結(jié)合其他 CSS 屬性進(jìn)行綜合布局設(shè)計(jì)。