網格區域
網格區域是指構成網格中矩形區域的一個或多個網格單元。當您使用基於線的放置放置專案時,或者使用命名網格區域定義區域時,會建立網格區域。

網格區域必須是矩形的;例如,不可能建立 T 形或 L 形的網格區域。
示例
在下面的示例中,我有一個包含兩個網格項的網格容器。我使用 grid-area 屬性為它們命名,然後使用 grid-template-areas 將它們放置在網格中。這建立了兩個網格區域,一個覆蓋四個網格單元,另一個覆蓋兩個網格單元。
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
html
<div class="wrapper">
<div class="item1">Item</div>
<div class="item2">Item</div>
</div>
另見
屬性參考
延伸閱讀
- CSS 網格佈局指南
- CSS 網格佈局規範中關於網格區域的定義