溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS中如何使用grid-template-areas屬性”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中如何使用grid-template-areas屬性”吧！
使用 grid-template-areas 描述布局
grid-template-areas 屬性接收由一個或多個字符串組成的值。每個字符串（包圍在引號中）代表網格里的一行。它可以在已經設置了 grid-template-columns 屬性（grid-template-rows 有無設置皆可）的網格上使用。
下例中的網格，用了四個區域描述，每個區域占據兩行兩列。網格區域是通過在多個單元格重復某個區域名稱來劃定范圍的。
grid-template-areas: "one one two two"
"one one two two"
"three three four four"
"three three four four";
在網格項目上使用 grid-area 屬性，為其指定某個區域名稱，即表示這個區域被該項目占據了。假設，有一個 .test 項目想要占據叫 one 的這個區域，可以這樣指定：
.test {
grid-area: one;
}
下面是一個完整的例子：
<div class="grid">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
<style>
.grid {
display: grid;
grid-template-areas:
"one one two two"
"one one two two"
"three three four four"
"three three four four";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
</style>
效果：
如果使用 Firefox Grid Inspector 查看區域名稱和行號分布，會看見每個項目但都占據了兩行兩列，在網格中得到定位。
使用 grid-template-areas 的規則
使用 grid-template-areas 屬性有一些限定規則，如果打破規則，布局也就無效了。第一個規則是 你必須要完整描述網格，即要考慮網格里的每個單元格。
如果某個單元格需要留空，就必須插入一個或多個點（比如 . 或 ... 等都可以）占位。注意在使用多個點時，點與點之間是沒有空格的。
所以，還可以這樣定義：
grid-template-areas: "one one two two"
"one one two two"
". . four four"
"three three four four";
效果（demo）：
一個區域名不能在不連續的兩塊區域上使用。比如，下面的定義 three 的方式就是無效的：
grid-template-areas: "one one three three"
"one one two two"
"three three four four"
"three three four four";
另外，不能創建一個非矩形區域。比如，“L”或“T”形區域的定義是無效的。
grid-template-areas: "one one two two"
"one one one one"
"three three four four"
"three three four four";
格式化字符串
我喜歡用上面的方式來定義 grid-template-areas 屬性——每一行字符串對應網格里的一行，看起來很直觀。
有時為了達到列與列之間的對齊效果，我會選擇使用多個點來指定空單元格。
grid-template-areas: "one one two two"
"one one two two"
"..... ..... four four"
"three three four four";
當然，字符串排列在一行也是有效的：
grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";
grid-template-areas 和 grid-area
之所以每塊命名區域都要保持為矩形，是因為每塊區域都要求能用基于網格線方式實現——而使用四根網格線定義的區域必然是個矩形，不會是個非矩形。
我先舉一個使用網格線定位項目的例子：
<div class="grid">
<div class="item">Item</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 50px);
}
.item {
grid-column: 2 / 4;
grid-row: 1 / 4;
}
</style>
效果：
就是說，只要為一個項目指定了下面四個屬性就能準確定位它在網格中的位置了：
grid-row-start
grid-column-start
grid-row-end
grid-column-end
而 grid-area 屬性恰好支持以這種順序指定項目位置的語法：
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 有趣的地方在于還能夠使用行號和命名網格線的方式，為項目指定定位區域。
使用行號的 grid-area
上面講的是使用 4 個行號來指定 grid-area 屬性。但是，如果不是 4 個呢？——比如，我只指定了前三個，沒有指定第 4 個值——這時，會使用缺省值 auto，也就是默認延伸一個軌道。因此，如果為一個項目使用的是 grid-row-start: 3，就是說其他三個值都設置成 auto 了——此時項目默認占據一行一列：
.item { grid-area: 3; }
效果：
使用 indent 的 grid-area
“indent”是對網格中 命名區域 的稱呼。
下面我舉了一個使用命名網格線指定 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 這個值。規范提到，在這種情況下，grid-column-end 的值就復制 grid-column-start 的，而在 grid-column-end 與 grid-column-start 一樣的情況下，grid-column-end 值又會被丟棄，最后的結果與設置行號時一樣了——等同于設置了 auto——自動延伸一個軌道。
還有，如果缺失的是第三個屬性 grid-row-end 的值，它也是先復制 grid-row-start 的值，最后等同于設置 auto。
下面舉了一個比較全面的例子，列出了所有的情況：
<div class="grid">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
<style>
.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];
}
.one {
grid-area: one-start / one-start / one-end / one-end;
}
.two {
grid-area: two-start / two-start / two-end;
}
.three {
grid-area: three-start / three-start;
}
.four {
grid-area: four-start;
}
</style>
效果：
這也能解釋了為什么再給 grid-area 僅設置一個 ident 值的情況下也能正常工作的原理（實際拓展成 4 個值的寫法了）。
還有一點大家需要知道的是，使用 grid-template-areas 屬性創建命名區域的時候，每塊區域的邊緣網格線都可以使用區域名稱引用。我以一個叫 one 的區域名稱舉例。
下面的寫法，
.one {
grid-area: one;
}
等同于這種（其他三個值復制第一個值）：
.one {
grid-row-start: one;
grid-row-end: one;
grid-column-start: one;
grid-row-end: one;
}
如果是 -start 屬性，那么 one 會被解析到這塊區域行、列的起始線；如果是 -end 屬性，那么 one 就會解析到這塊區域行、列的終止線。當然，這種情況僅適應于 grid-area 使用一個命名區域值指定的場景。
在使用 grid-template-areas 的布局中層疊項目
使用 grid-template-areas 定義區域的時候，每個單元格能且只能對應一個名稱。當然，在完成主體布局之后，你仍然可以使用行號向布局中疊加新的項目。
下例中，在主題布局之外，我基于網格線在布局中疊加了一個項目：
<div class="grid">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
<style>
.grid {
display: grid;
grid-template-areas:
"one one two two"
"one one two two"
"three three four four"
"three three four four";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
/* 與前面不同的是，這個項目是使用行號定位的 */
.five {
grid-row: 2 / 4;
grid-column: 2 / 4;
}
</style>
效果：
你還可以使用命名網格線來指定項目占據的行和列。更好的是，在使用 grid-template-areas 定義網格區域的時候，實際上也會同時給區域周圍的四根網格線生成一個以區域名為前綴的名字，區域起始邊緣的網格線的名稱是 xx-start 的形式，終止邊緣的的網格線的名稱則是 xx-end 的形式。
以命名區域 one 為例，它的起始邊線名字叫 one-start，終止邊線的名字則叫 one-end。
網格中，你可以使用這些隱式生成的命名網格線定位項目。這在需要不同的斷點處重新定義網格布局的場景中，你希望某個定位項目始終位于某個行名之后，會很有用。
<div class="grid">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
<style>
.grid {
display: grid;
grid-template-areas:
"one one two two"
"one one two two"
"three three four four"
"three three four four";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
.five {
grid-row: one-start / three-end;
grid-column: three-start / four-start;
}
</style>
在響應式設計中使用 grid-template-areas
我在構建組件庫的時候，發使用 grid-template-areas 屬性可以很準確的從 CSS 里看到組件組成方式。特別是在不同斷點處重新定義網格布局的時候，我只要給 grid-template-areas 屬性重新賦值，就能改變當前網格里軌道數量和區域分布。
在下面的 CSS 中，默認組件是單列布局的，在視口寬度達到 600px 以上時，我會重新給 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 屬性定義布局的方式，可能會帶來的一個問題就是元素的視覺呈現跟在源碼的順序可能是不一致的。如果是使用 Tab 按鍵或語言助手訪問的頁面，那么看到或聽到的內容是按照源碼順序來的，如果布局里的元素因為詩視覺需要移動了位置，那么就會導致視覺呈現上的混亂。所以，在移動項目的時候，一定要留意視覺呈現與源碼上的關聯性，不至于使用輔助設備訪問時，得到不一致的體驗。
感謝各位的閱讀，以上就是“CSS中如何使用grid-template-areas屬性”的內容了，經過本文的學習后，相信大家對CSS中如何使用grid-template-areas屬性這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
