Einführung in CSS Grid: Der Grid-Container

Ein Raster mit CSS Grid besteht grob gesagt aus einem Container und den darin enthaltenen Grid-Elementen. In diesem Artikel geht es um das CSS für den Container.

Angenommen, wir haben dieses HTML

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

Ohne weitere Anweisungen werden die Grid-Elemente einfach untereinander platziert und man sieht nicht viel.

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

Spalten definieren mit grid-template-columns

Mit den folgenden drei Zeilen CSS wird aus dem Container ein Grid-Container.
display:grid initiiert den Grid und mit grid-template-columns bauen wir die Spalten des Rasters. grid-gap sorgt für die Abstände.

.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

Die Einheit fr bedeutet Fraction, das ist der zur Verfügung stehende freie Platz im Grid. grid-template-columns: 1fr 1fr 1fr;bedeutet, dass der zur Verfügung stehende freie Platz in 3 gleiche Teile geteilt wird.

Man kann auch andere Einheiten anstatt fr verwenden, px, em, rem oder %. Man kann die Einheiten miteinander mischen.

grid-template-columns: 200px 200px 200px;
grid-template-columns: 25% auto 200px;

Alternative Schreibweise für grid-template-columns

Den oben gezeigten dreispaltigen Raster kann man auch anders schreiben, indem man die repeat-Anweisung einsetzt. Bei Grids mit vielen Elementen wird der Code dadurch übersichtlicher. Das Ergebnis ist bei beiden Schreibweise derselbe dreispaltige Raster.

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat (3, 1fr);

Reihen hinzufügen mit grid-template-rows

Bisher haben wir nur die Dimensionen der Spalten (columns) definiert. Für viele Fälle ist das vollkommen ausreichend.

Mit der Eigenschaft grid-template-rows kann man auch Angaben für Reihen (rows) definieren. Das würde man beispielsweise dann machen, wenn die Reihen unterschiedliche Höhen haben sollen.

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

Im nächsten Artikel in dieser Reihe geht es um die Platzierung der Grid-Elemente innerhalb des Containers: Einführung in CSS Grid: Die Elemente im Grid-Container

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.