Florence Maurice

CSS Grid: Tricksen mit verschachtelten Grids

Geschrieben am: 20.10.2017 , aktualisiert: 19.3.2022

Eine Besonderheit bei Grid ist, dass man damit immer nur die direkten Kindelemente anordnen kann - nicht die Kindeskinder oder andere Nachfahren. Aber es gibt einen schönen Trick, wie man in einem Speziallfall doch scheinbar die Unterelemente mitanordnen kann und ein verschachteltes Grid für "ein Raster" nutzen kann.

Ich bin immer auf der Suche nach schönen CSS-Grid-Tricks. Und mit am faszinierendsten fand ich folgenden, den ich in dem Training von Morten Rand-Hendriksen  Advanced Layouts mit Grid gesehen hatte.

Der Artikel setzt ein Grundverständnis von CSS-Grid voraus. Diese kann man sich z.B. in meinem Videotraining https://www.linkedin.com/learning/css-grid-grundkurs/ aneignen.

Wir haben folgenden HTML-Code:

<div class="a"> 
  <div class="x">x</div> 
  <div class="x">x</div> 
</div> 
<div class="b">b</div>
<div class="c">c</div>

Das Entscheidende ist die Verschachtelung: Innerhalb von .a befinden sich die beiden Elemente .x.

Das Ziel ist die folgende Darstellung:

.b und .c sind in der Mitte, die beiden .x-Elemente außerhalb:

Das Problem ist, dass wir mit Grid ja immer nur Elemente auf derselben Ebene anordnen können – und nicht Kindelemente (außer man greift zur derzeit noch wenig unterstützten Eigenschaft display: contents).

Und jetzt kommt die – wie ich finde – sehr raffinierte Lösung.

Erst einmal aktivieren wir die Rasterdarstellung beim umfassenden Element und definieren ein dreispaltiges Raster.

.raster { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
}

Die Elemente ordnen sich automatisch an, wir haben dadurch folgende Darstellung:

Jetzt definieren wir ebenfalls ein Raster für .a – und zwar soll es die Rastereigenschaften des übergeordneten Elements erben. Außerdem soll sich das Element über alle Rasterspalten des Elternrasters erstrecken, was man am einfachsten mit 1 / -1 erreicht:

.a { 
  display: grid; 
  grid-template-columns: inherit; 
  grid-column: 1 / -1; 
}

Nun platzieren wir die Element:

.b und .c sollen in der Mitte angeordnet werden (Beginn bei der zweiten vertikalen Rasterlinie):

.b, .c { grid-column: 2; }

Das erste .x-Element soll ganz links (erste vertikale Rasterlinie) und das zweite ganz rechts (dritte vertikale Rasterlinie) platziert werden.

.x { 
  grid-column: 1; 
} 
.x:last-of-type { 
  grid-column: 3; 
}

Damit sieht es folgendermaßen aus:

Das heißt: Es gibt logischerweise eine Lücke zwischen den beiden .x-Elementen. Wie lässt sich die Lücke entfernen?

Indem man die Höhe von .a auf 0 setzt.

.a { 
  /* andere Angaben wie vorher */ 
  height: 0; 
}

Yepp. Damit ist die Darstellung wie gewünscht.

Beispiel live ausprobieren

Dass die beiden .x-Elemente zu sehen sind, obwohl die Höhe des umfassenden .a auf 0 gesetzt ist, liegt daran, dass Elemente standardmäßig auch größer sein können, als das Raster für sie Platz bietet. Sie ragen dann einfach hinaus.

Das ist zugegebenermaßen ein ziemlich verrückter Trick, wie ich finde. Und es ist sicher nichts, was man bei einem Standard-0815-Gridlayout brauchen kann. Denn es ist beileibe nicht für alle Situationen geeignet – beispielsweise wird’s problematisch, wenn man weitere Elemente unterhalb der beiden .x-Elemente platzieren möchte etc. Aber für spezielle Situationen kann es nützlich sein.

Praktisch sind außerdem zwei Gridkonzepte, die man auch sonst brauchen kann:

1. Elemente lassen sich mit grid-column: 1 / -1 über alle expliziten Spalten erstrecken (funktioniert parallel mit grid-row)
2. Raster-Items können aus dem Rasterelement, zu dem sie gehören, herausragen. Ihr Verhalten lässt sich dann mit overflow steuern.