這篇文章主要講解了“CSS中如何使用grid-template-areas屬性”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS中如何使用grid-template-areas屬性”吧！

創(chuàng)新互聯(lián)建站于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元東鄉(xiāng)做網(wǎng)站,已為上家服務(wù),為東鄉(xiāng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

使用 grid-template-areas 描述布局

grid-template-areas 屬性接收由一個(gè)或多個(gè)字符串組成的值。每個(gè)字符串（包圍在引號(hào)中）代表網(wǎng)格里的一行。它可以在已經(jīng)設(shè)置了 grid-template-columns 屬性（grid-template-rows 有無設(shè)置皆可）的網(wǎng)格上使用。

下例中的網(wǎng)格，用了四個(gè)區(qū)域描述，每個(gè)區(qū)域占據(jù)兩行兩列。網(wǎng)格區(qū)域是通過在多個(gè)單元格重復(fù)某個(gè)區(qū)域名稱來劃定范圍的。

grid-template-areas: "one one two two"

"one one two two"

"three three four four"

"three three four four";

在網(wǎng)格項(xiàng)目上使用 grid-area 屬性，為其指定某個(gè)區(qū)域名稱，即表示這個(gè)區(qū)域被該項(xiàng)目占據(jù)了。假設(shè)，有一個(gè) .test 項(xiàng)目想要占據(jù)叫 one 的這個(gè)區(qū)域，可以這樣指定：

.test {

grid-area: one;

}

下面是一個(gè)完整的例子：

效果：

如果使用 Firefox Grid Inspector 查看區(qū)域名稱和行號(hào)分布，會(huì)看見每個(gè)項(xiàng)目但都占據(jù)了兩行兩列，在網(wǎng)格中得到定位。

使用 grid-template-areas 的規(guī)則

使用 grid-template-areas 屬性有一些限定規(guī)則，如果打破規(guī)則，布局也就無效了。第一個(gè)規(guī)則是 你必須要完整描述網(wǎng)格，即要考慮網(wǎng)格里的每個(gè)單元格。

如果某個(gè)單元格需要留空，就必須插入一個(gè)或多個(gè)點(diǎn)（比如 . 或 ... 等都可以）占位。注意在使用多個(gè)點(diǎn)時(shí)，點(diǎn)與點(diǎn)之間是沒有空格的。

所以，還可以這樣定義：

grid-template-areas: "one one two two"

"one one two two"

". . four four"

"three three four four";

效果（demo）：

一個(gè)區(qū)域名不能在不連續(xù)的兩塊區(qū)域上使用。比如，下面的定義 three 的方式就是無效的：

grid-template-areas: "one one three three"

"one one two two"

"three three four four"

"three three four four";

另外，不能創(chuàng)建一個(gè)非矩形區(qū)域。比如，“L”或“T”形區(qū)域的定義是無效的。

grid-template-areas: "one one two two"

"one one one one"

"three three four four"

"three three four four";

格式化字符串

我喜歡用上面的方式來定義 grid-template-areas 屬性——每一行字符串對應(yīng)網(wǎng)格里的一行，看起來很直觀。

有時(shí)為了達(dá)到列與列之間的對齊效果，我會(huì)選擇使用多個(gè)點(diǎn)來指定空單元格。

grid-template-areas: "one   one   two  two"

"one   one   two  two"

"..... ..... four four"

"three three four four";

當(dāng)然，字符串排列在一行也是有效的：

grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";

grid-template-areas 和 grid-area

之所以每塊命名區(qū)域都要保持為矩形，是因?yàn)槊繅K區(qū)域都要求能用基于網(wǎng)格線方式實(shí)現(xiàn)——而使用四根網(wǎng)格線定義的區(qū)域必然是個(gè)矩形，不會(huì)是個(gè)非矩形。

我先舉一個(gè)使用網(wǎng)格線定位項(xiàng)目的例子：

效果：

就是說，只要為一個(gè)項(xiàng)目指定了下面四個(gè)屬性就能準(zhǔn)確定位它在網(wǎng)格中的位置了：

grid-row-start

grid-column-start

grid-row-end

grid-column-end

而 grid-area 屬性恰好支持以這種順序指定項(xiàng)目位置的語法：

grid-area: grid-row-start grid-column-start grid-row-end grid-column-end

因此，下面的寫法：

.grid {

grid-template-areas: "one   one   two  two"

"one   one   two  two"

"three three four four";

"three three four four";

}

.one {

grid-area: one;

}

.two {

grid-area: two;

}

.three {

grid-area: three;

}

.four {

grid-area: four;

}

可以改寫成：

.one {

grid-area: 1 / 1 / 3 / 3;

}

.two {

grid-area: 1 / 3 / 3 / 5;

}

.three {

grid-area: 3 / 1 / 5 / 3;

}

.four {

grid-area: 3 / 3 / 5 / 5;

}

grid-area 有趣的地方在于還能夠使用行號(hào)和命名網(wǎng)格線的方式，為項(xiàng)目指定定位區(qū)域。

使用行號(hào)的 grid-area

上面講的是使用 4 個(gè)行號(hào)來指定 grid-area 屬性。但是，如果不是 4 個(gè)呢？——比如，我只指定了前三個(gè)，沒有指定第 4 個(gè)值——這時(shí)，會(huì)使用缺省值 auto，也就是默認(rèn)延伸一個(gè)軌道。因此，如果為一個(gè)項(xiàng)目使用的是 grid-row-start: 3，就是說其他三個(gè)值都設(shè)置成 auto 了——此時(shí)項(xiàng)目默認(rèn)占據(jù)一行一列：

.item { grid-area: 3; }

效果：

使用 indent 的 grid-area

“indent”是對網(wǎng)格中 命名區(qū)域 的稱呼。

下面我舉了一個(gè)使用命名網(wǎng)格線指定 grid-area 屬性的例子。

.grid {

display: grid;

grid-template-columns:

[one-start three-start] 1fr 1fr

[one-end three-end two-start four-start] 1fr 1fr [two-end four-end];

grid-template-rows:

[one-start two-start] 100px 100px

[one-end two-end three-start four-start] 100px 100px [three-end four-end];;

}

.two {

grid-area: two-start / two-start / two-end;

}

注意到，這里我并未指定 grid-column-end 這個(gè)值。規(guī)范提到，在這種情況下，grid-column-end 的值就復(fù)制 grid-column-start 的，而在 grid-column-end 與 grid-column-start 一樣的情況下，grid-column-end 值又會(huì)被丟棄，最后的結(jié)果與設(shè)置行號(hào)時(shí)一樣了——等同于設(shè)置了 auto——自動(dòng)延伸一個(gè)軌道。

還有，如果缺失的是第三個(gè)屬性 grid-row-end 的值，它也是先復(fù)制 grid-row-start 的值，最后等同于設(shè)置 auto。

下面舉了一個(gè)比較全面的例子，列出了所有的情況：

效果：

這也能解釋了為什么再給 grid-area 僅設(shè)置一個(gè) ident 值的情況下也能正常工作的原理（實(shí)際拓展成 4 個(gè)值的寫法了）。

還有一點(diǎn)大家需要知道的是，使用 grid-template-areas 屬性創(chuàng)建命名區(qū)域的時(shí)候，每塊區(qū)域的邊緣網(wǎng)格線都可以使用區(qū)域名稱引用。我以一個(gè)叫 one 的區(qū)域名稱舉例。

下面的寫法，

.one {

grid-area: one;

}

等同于這種（其他三個(gè)值復(fù)制第一個(gè)值）：

.one {

grid-row-start: one;

grid-row-end: one;

grid-column-start: one;

grid-row-end: one;

}

如果是 -start 屬性，那么 one 會(huì)被解析到這塊區(qū)域行、列的起始線；如果是 -end 屬性，那么 one 就會(huì)解析到這塊區(qū)域行、列的終止線。當(dāng)然，這種情況僅適應(yīng)于 grid-area 使用一個(gè)命名區(qū)域值指定的場景。

在使用 grid-template-areas 的布局中層疊項(xiàng)目

使用 grid-template-areas 定義區(qū)域的時(shí)候，每個(gè)單元格能且只能對應(yīng)一個(gè)名稱。當(dāng)然，在完成主體布局之后，你仍然可以使用行號(hào)向布局中疊加新的項(xiàng)目。

下例中，在主題布局之外，我基于網(wǎng)格線在布局中疊加了一個(gè)項(xiàng)目：

效果：

你還可以使用命名網(wǎng)格線來指定項(xiàng)目占據(jù)的行和列。更好的是，在使用 grid-template-areas 定義網(wǎng)格區(qū)域的時(shí)候，實(shí)際上也會(huì)同時(shí)給區(qū)域周圍的四根網(wǎng)格線生成一個(gè)以區(qū)域名為前綴的名字，區(qū)域起始邊緣的網(wǎng)格線的名稱是 xx-start 的形式，終止邊緣的的網(wǎng)格線的名稱則是 xx-end 的形式。

以命名區(qū)域 one 為例，它的起始邊線名字叫 one-start，終止邊線的名字則叫 one-end。

網(wǎng)格中，你可以使用這些隱式生成的命名網(wǎng)格線定位項(xiàng)目。這在需要不同的斷點(diǎn)處重新定義網(wǎng)格布局的場景中，你希望某個(gè)定位項(xiàng)目始終位于某個(gè)行名之后，會(huì)很有用。

在響應(yīng)式設(shè)計(jì)中使用 grid-template-areas

我在構(gòu)建組件庫的時(shí)候，發(fā)使用 grid-template-areas 屬性可以很準(zhǔn)確的從 CSS 里看到組件組成方式。特別是在不同斷點(diǎn)處重新定義網(wǎng)格布局的時(shí)候，我只要給 grid-template-areas 屬性重新賦值，就能改變當(dāng)前網(wǎng)格里軌道數(shù)量和區(qū)域分布。

在下面的 CSS 中，默認(rèn)組件是單列布局的，在視口寬度達(dá)到 600px 以上時(shí)，我會(huì)重新給 grid-template-area 屬性賦值，改變成兩列布局。這種方法的好處（也是我前面說過的）就是任何看到這段 CSS 的人都可很清晰看懂是如何布局的。

.wrapper {

background-color: #fff;

padding: 1em;

display: grid;

gap: 20px;

grid-template-areas:

"hd"

"bd"

"sd"

"ft";

}

@media (min-width: 600px) {

.wrapper {

grid-template-columns: 3fr 1fr;

grid-template-areas:

"hd hd"

"bd sd"

"ft ft";

}

}

header { grid-area: hd; }

article {grid-area: bd; }

aside { grid-area: sd; }

footer { grid-area: ft; }

可訪問性

使用 grid-template-areas 和 grid-area 屬性定義布局的方式，可能會(huì)帶來的一個(gè)問題就是元素的視覺呈現(xiàn)跟在源碼的順序可能是不一致的。如果是使用 Tab 按鍵或語言助手訪問的頁面，那么看到或聽到的內(nèi)容是按照源碼順序來的，如果布局里的元素因?yàn)樵娨曈X需要移動(dòng)了位置，那么就會(huì)導(dǎo)致視覺呈現(xiàn)上的混亂。所以，在移動(dòng)項(xiàng)目的時(shí)候，一定要留意視覺呈現(xiàn)與源碼上的關(guān)聯(lián)性，不至于使用輔助設(shè)備訪問時(shí)，得到不一致的體驗(yàn)。

感謝各位的閱讀，以上就是“CSS中如何使用grid-template-areas屬性”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS中如何使用grid-template-areas屬性這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！