grid-area 可簡(jiǎn)寫(xiě)行列起止或引用命名區(qū)域布局。通過(guò) grid-template-areas 定義矩形區(qū)域并為子元素分配名稱(chēng)，使布局更直觀清晰，需注意區(qū)域連續(xù)性與軌道定義配合。

在 CSS Grid 布局中，grid-area 是一個(gè)非常實(shí)用的屬性，可以用來(lái)為網(wǎng)格項(xiàng)指定它應(yīng)該占據(jù)的區(qū)域。它既能簡(jiǎn)寫(xiě) grid-row-start、grid-row-end、grid-column-start、grid-column-end，也可以直接引用通過(guò) grid-template-areas 定義的命名區(qū)域。

使用 grid-area 指定行列范圍

你可以用 grid-area 以簡(jiǎn)寫(xiě)形式定義元素從哪行哪列開(kāi)始，到哪行哪列結(jié)束：

例如：

.item {
  grid-area: 2 / 1 / 4 / 3;
}

表示這個(gè)元素從第 2 行開(kāi)始，第 1 列開(kāi)始，跨越到第 4 行前（即占 2 行），第 3 列前（即占 2 列）。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

使用命名區(qū)域（推薦方式）

更直觀的方式是結(jié)合 grid-template-areas 在容器上定義布局結(jié)構(gòu)，然后在子元素中用 grid-area 賦予名稱(chēng)。

AppMall應(yīng)用商店

AI應(yīng)用商店，提供即時(shí)交付、按需付費(fèi)的人工智能應(yīng)用服務(wù)

56

查看詳情

先在父容器中定義模板：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

然后在子元素中使用 grid-area 設(shè)置對(duì)應(yīng)名稱(chēng)：

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

這樣每個(gè)元素就會(huì)自動(dòng)放入你設(shè)計(jì)的布局區(qū)域中，代碼更清晰易讀。

注意事項(xiàng)和技巧

• 命名區(qū)域必須形成一個(gè)矩形，不能是 L 形或斷開(kāi)的區(qū)域。
• 未使用的區(qū)域可以用 . 表示空白：

grid-template-areas:
    "header header"
    "sidebar ."
    "footer footer";

登錄后復(fù)制
• 同一個(gè)名稱(chēng)可以在模板中重復(fù)出現(xiàn)，表示該元素占據(jù)多個(gè)格子。
• grid-area 名稱(chēng)不會(huì)自動(dòng)創(chuàng)建新軌道，需配合 grid-template-rows 和 grid-template-columns 使用。

基本上就這些。合理使用 grid-area 配合命名區(qū)域，能讓頁(yè)面布局更直觀、維護(hù)更方便。不復(fù)雜但容易忽略細(xì)節(jié)。

以上就是css grid-area定義區(qū)域如何應(yīng)用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！