CSS Grundlagen: Grid für Einsteiger – Die beste Schritt-für-Schritt Anleitung, die du brauchst

Das mobile Internet stellt für die Entwickler von Websites eine große Herausforderung dar. Mobile Endgeräte wie Tablets und Smartphones haben andere Bildschirmauflösungen als Desktop-Computer und Laptops. Diese unterschiedlichen Displays und Bildschirmauflösungen müssen bei der Gestaltung einer Webseite ebenfalls berücksichtigt werden.

Responsive Web-Design sorgt dafür, dass eine Webseite auf jedem Endgerät und bei jeder Bildschirmauflösung gut aussieht und benutzbar ist. Responsive Layouts passen sich automatisch an die verfügbare Bildschirmgröße oder Fenstergröße an.

CSS Grid ist ein Raster aus fiktiven (gedachten) Linien. Es dient dazu, das Layout von Webseiten in Zeilen und Spalten (Tracks) zu gliedern. Die Grid-Zellen sind die Schnittpunkte von Zeilen und Spalten. Eine Grid-Zelle wird von vier Grid-Linien begrenzt und ist die kleinste Einheit in dem Grid-Container. Mit diesem Layoutraster lassen sich komplexe, verschachtelte Layouts effektiv gestalten.

CSS Grid arbeitet mit einem Eltern-Element (Grid-Container), in dem das Raster definiert wird. Danach werden mehere Kind-Elemente (Item) in dem Raster platziert. Damit der Container die Information erhält, dass mit CSS Grid gearbeitet werden soll, wird der Befehl display: grid verwendet. Die im übergeordneten Container definierten Eigenschaften werden an alle Items vererbt. Dann werden die Zeilen und Spalten definiert.

Die Spalten bzw. Zeilen des Grid werden jeweils durch eine Liste von Werten definiert, die durch Leerzeichen getrennt sind. Die Werte geben die Breite bzw. Höhe der Tracks an. Der Abstand zwischen ihnen ist die Breite der Grid-Linien.

Die Breite bzw. Höhe (Track-Size) kann eine Länge oder ein Prozentwert sein. Ein Sonderfall ist die Einheit Fraction (fr). Mit dieser Maßeinheit kann man den Bildschirm individuell aufteilen, ähnlich wie mit Prozentwerten. Der Vorteil der relativen Einheit fr ist, dass das Raster sich automatisch an die Bildschirmgröße anpassen kann.

Für die Spalten wird die Eigenschaft grid-template-columns und für die Zeilen die Eigenschaft grid-template-rows verwendet. Diese Eigenschften legen das Raster an und zeichnen die fiktiven Raster-Linien.

Sollen Abstände zwischen den Spalten bzw. Zeilen des Grid erzeugt werden, so kann mit der Eigenschaft gap des Grid-Containers eine Breite für die Grid-Linien festgelegt werden.

Die Eigenschaft gap ist die Kurzschreibweise für die Eigenschaften column-gap und row-gap (früher: grid-gap, grid-column-gap und grid-row-gap).

• Die Abstände werden nur zwischen den Spalten bzw. Zeilen erzeugt. Die erste und letzte Grid-Linie bleibt unverändert.

Werden nun Child-Elemente in den Grid-Container eingefügt, so werden die Inhalte automatisch ins Grid-Raster eingefügt. Standardmäßig werden die Elemente im Grid-Container zeilenweise von links oben nach rechts unten ausgerichtet.

Im folgenden Beispiel wird ein CSS Grid mit drei Zeilen und vier Spalten erzeugt. Die erste Zeile hat eine Höhe von 12em, die dritte eine Höhe von 6em. Die mittlere Zeile nimmt den verbleibenden Platz ein.

/* Grid-Container definieren */
.grid-container {
  display: grid;
  grid-template-rows: 12em 1fr 6em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.0em;
  padding: 0;
  background: #dbdbdb;
}

.grid-container > div {
  font-size: 1.25em;
  text-align: center;
  background: #94bbcc;
  color: #000000;
  border: 1px solid #000000;
}

<div class="grid-container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
  <div>Box 5</div>
  <div>Box 6</div>
  <div>Box 7</div>
  <div>Box 8</div>
  <div>Box 9</div>
  <div>Box 10</div>
  <div>Box 11</div>
  <div>Box 12</div>
</div>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Um den Effekt besser sichtbar zu machen, hat das Ausgabe-Window eine Höhe von 40em und der Grid-Container eine Höhe von 100% des Ausgabe-Windows.

Mit CSS Grid lassen sich Elemente auch völlig frei im Raster positionieren. Um dies zu erreichen, wird den Child-Elementen mit den CSS-Eigenschaften

• grid-row-start und grid-row-end bzw.
• grid-column-start und grid-column-end

mitgeteilt, wo sie im Grid-Raster positioniert werden sollen. Für diese CSS-Eigenschaften gibt es auch die Kurzschreibweise

• grid-row bzw.
• grid-column

Dabei werden Start-Linie und End-Linie des Rasters mit einem Slash / voneinander getrennt.

• Die Positionierung wird nicht über Rasterspalten bzw. Rasterzeilen vorgenommen, sondern über Grid-Linien.

Das oben dargestellte Beispiel-Layout besitzt vier Spalten und drei Zeilen. Es besitzt daher fünf vertikale und vier horizontale Grid-Linien. Wenn sich ein Element über die gesamte Breite ausdehnen soll, dann erstreckt es sich von Grid-Linie 1 (0%) bis 5 (100%).

3-Spalten-Layout mit Header und Footer

Das folgende Code-Beispiel zeigt, wie man die Elemente im Grid-Raster positionieren kann, um ein 3-Spalten-Layout mit Kopfzeile und Fußzeile zu erzeugen.

/* 3-Spalten-Layout mit CSS Grid */
.gridBox {
  display: grid;
  grid-template-rows: 4em 1fr 2em;
  grid-template-columns: 18% 1fr 20%;
  gap: 0;
  padding: 0;
  background: transparent;
}

.gridBox > nav {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #600d0d;
  color: #000000;
}

.gridBox > header {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #ffffd2;
  color: #000000;
}

.gridBox > main {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #94bbcc;
  color: #000000;
}

.gridBox > aside {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #e5f3d8;
  color: #000000;
}

.gridBox > footer {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  padding: 0 0.75em;
  font-size: 1.25em;
  text-align: center;
  background: #dfdfdf;
  color: #000000;
}

<div class="gridBox">
  <header>Headline</header>
  <main>Hauptinhalt der Seite</main>
  <nav>Navigation der Seite</nav>
  <aside>Info-Box</aside>
  <footer>Fußzeile</footer>
</div>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Um den Effekt besser sichtbar zu machen, hat das Ausgabe-Window eine Höhe von 40em und der Grid-Container eine Höhe von 100% des Ausgabe-Windows.

Empfehlung
In diesem Beispiel wird die Breite für die Navigation und die rechte Seitenleiste (Infobox) in Prozent angegeben. In der Praxis ist es in der Regel besser, eine relative Einheit wie em zu verwenden.