Rasterbereiche

Ein Rasterbereich ist eine oder mehrere Rasterzellen, die einen rechteckigen Bereich im Raster bilden. Rasterbereiche entstehen, wenn Sie ein Element mit linienbasierter Platzierung positionieren oder wenn Sie Bereiche mit benannten Rasterbereichen definieren.

Bild, das einen hervorgehobenen Rasterbereich zeigt

Rasterbereiche müssen rechteckig sein; es ist beispielsweise nicht möglich, einen T- oder L-förmigen Rasterbereich zu erstellen.

Beispiel

Im folgenden Beispiel habe ich einen Rastercontainer mit zwei Rasterelementen. Ich habe diese mit der grid-area-Eigenschaft benannt und dann mit grid-template-areas im Raster angeordnet. Dies erzeugt zwei Rasterbereiche, einer umfasst vier Rasterzellen, 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

Eigenschaftsreferenz

Weiterführende Informationen

CSS-Rasterlayout-Leitfaden:
- Grundkonzepte des Rasterlayouts
- Rastervorlagenbereiche
Definition von Rasterbereichen in der CSS-Rasterlayoutspezifikation