Grid Areas

Ein Grid-Bereich ist eine oder mehrere Grid-Zellen, die zusammen einen rechteckigen Bereich im Grid bilden. Grid-Bereiche werden erstellt, wenn Sie ein Element mithilfe der linienbasierten Platzierung platzieren oder Bereiche mit benannten Grid-Bereichen definieren.

Bild zeigt einen hervorgehobenen Grid-Bereich

Grid-Bereiche müssen rechteckig sein; es ist nicht möglich, zum Beispiel einen T- oder L-förmigen Grid-Bereich zu erstellen.

Beispiel

Im untenstehenden Beispiel habe ich ein Grid-Container mit zwei Grid-Elementen. Ich habe diese mit der grid-area Eigenschaft benannt und dann mit grid-template-areas im Grid angeordnet. Dies erstellt zwei Grid-Bereiche, einer, der vier Grid-Zellen umfasst, der andere zwei.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

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>

Siehe auch

Property-Referenz

Weiterführende Literatur

CSS Grid-Layout-Leitfaden:
- Grundkonzepte des Grid-Layouts
- Grid Template Areas
Definition von Grid-Bereichen in der CSS Grid-Layout-Spezifikation