Einführung in CSS Grid: Die Elemente im Grid-Container

Im ersten Teil dieser Einführungsserie ging es um den Grid-Container. Das ist der Container, in dem der Grid stattfindet und der die Grid-Elemente umschließt. In diesem Artikel geht es um die Grid-Elemente selbst und wie man sie mit CSS Grid gestalten kann.

Mein HTML sieht so aus:

<div class="grid-container">
 <div class="grid-element">Eins</div>
 <div class="grid-element">Zwei</div>
 <div class="grid-element">Drei</div>
</div>

Bisher habe ich nur mit dem Grid-Container gearbeitet und einen damit dreispaltigen Raster erzeugt.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2px;
}

See the Pen CSS-Grid Demo 2 by Kirsten (@netzialist) on CodePen.light

Jetzt möchte ich die Elemente im Container bearbeiten. Dazu erhöhe ich erst Mal die Anzahl der Elemente von drei auf sechs. Und ich gebe jedem Element eine individuelle Klasse, so dass ich jedes Element einzeln ansprechen kann.

<div class="grid-container">
 <div class="grid-element eins">Eins</div>
 <div class="grid-element zwei">Zwei</div>
 <div class="grid-element drei">Drei</div>
 <div class="grid-element vier">Vier</div>
 <div class="grid-element fuenf">Fünf</div>
 <div class="grid-element sechs">Sechs</div>
</div>

Grid-Element über mehrere Spalten

Wenn ich zum Beispiel erreichen möchte, dass das erste Element über alle drei Spalten geht, kann ich Folgendes schreiben:

.grid-element.eins {
  grid-column-start: 1;
  grid-column-end: 4;
}

Ich hab mal die Hintergrund-Farbe auf orange geändert damit man es besser sieht.

See the Pen CSS Grid Demo 4 by Kirsten (@netzialist) on CodePen.light

Um diese CSS-Anweisung zu verstehen, muss man wissen, dass CSS Grid Linien zählt. In einem dreispaltiger-Raster gibt es 4 Linien:

Die Zahlen in der CSS-Anweisung beziehen sich auf diese Linien. Die erste Zahl bezeichnet den Startpunkt der column (Spalte), die zweite Zahl bezeichnet den Endpunkt.

Es gibt dafür auch eine abgekürzte Schreibweise. Man würde dann Folgendes schreiben:

.grid-element.eins {
  grid-column: 1 / 4;
}

Grid-Element über mehrere Reihen

Jetzt haben wir unten rechts ein „Loch“ in unserem Raster. Das möchte ich schließen, indem ich das vierte Element über zwei Reihen gehen lasse.

.grid-element.vier{
grid-row:span 2;
}

Auch hier hab ich die Hintergrund-Farbe geändert, diesmal auf ein schönes pink.

See the Pen CSS Grid Demo 5 by Kirsten (@netzialist) on CodePen.light

Grid-Element über die gesamte Breite

Wenn ich mit einer Spalte die gesamte Breite meines Grid ausnutzen möchte, kann ich das beispielsweise so machen:

.grid-element.eins{
grid-row:span 3;
}

Oder ich könnte sagen „Starte an Linie 1 und gehe bis Linie 4“.

.grid-element.eins{
grid-row: 1/4;
}

Diese Anweisung stimmt natürlich nicht mehr, wenn ich die Angaben im Grid-Container ändere und z.B. anstatt drei Spalten vier Spalten anzeigen lasse. Damit das Grid-Element sich auf jeden Fall immer auf die gesamte Breite bezieht, gibt es einen Trick. Man arbeitet mit der negativen Zahl -1.

.grid-element.eins{
grid-row: 1/-1;
}

Alle drei Schreibweisen kommen zum selben Ergebnis.
» Probier’s mal aus, die CodePen-Beispiele kannst du direkt hier bearbeiten.

Angaben für Platzierung kombinieren

Die Angaben für die Platzierung eines Grid-Elements kannst du beliebig miteinander kombinieren.

.grid-element.drei{
grid-column: 2/span 2;
grid-row: 1/span 2;
}

Das dritte Element geht über 2 Spalten und 2 Reihen und beginnt jeweils an der zweiten Linie.
Zur besseren Erkennbarkeit habe ich dem Element einen Rahmen gegeben.

See the Pen CSS Grid Demo 6 by Kirsten (@netzialist) on CodePen.light

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.