網格區域

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

Image showing a highlighted grid area

網格區域必須是矩形的;例如,不可能建立 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>

另見

屬性參考

延伸閱讀