Grid Layout Container

Ein Grid beginnt immer mit einem Container. Dieser Container bekommt display: grid. Die direkten Kinder dieses Containers werden automatisch zu Grid-Items.

1.card-grid {
2  display: grid;
3}
4.card {
5  background-color: #1e6bd9;
6  padding: 8px;
7}

1<section class="card-grid">
2  <article class="card">Karte 1</article>
3  <article class="card">Karte 2</article>
4  <article class="card">Karte 3</article>
5</section>
6

In diesem Beispiel ist .card-grid der Container. Die einzelnen .card-Elemente sind die direkten Kinder und werden dadurch zu Grid-Items.

Spalten mit grid-template-colums

Mit grid-template-columns definierst du, wie viele Spalten das Grid haben soll und wie breit diese Spalten sind.

1.card-grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4}
5.card {
6  background-color: #1e6bd9;
7  padding: 8px;
8}
9

Drei Werte bedeuten: Das Grid bekommt drei Spalten. In diesem Fall sind alle drei Spalten gleich breit.

Beispiele für Spalten

• Eine feste Spalte und eine flexible Spalte: grid-template-columns: 200px 1fr;

• Drei gleich große Spalten:grid-template-columns: 1fr 1fr 1fr;

• Eine größere mittlere Spalte:grid-template-columns: 1fr 2fr 1fr;

Zeilen mit grid-template-rows

Mit grid-template-rows definierst du die Höhe der Zeilen. Das funktioniert ähnlich wie bei den Spalten

1.layout {
2  display: grid;
3  grid-template-rows: 100px 200px;
4}
5

1<div class="layout">
2  <header>Header</header>
3  <main>Hauptinhalt</main>
4</div>
5

Dieses Grid hat zwei Reihen: Die erste ist 100px hoch, die zweite 200px.

Hinweis: In vielen Kartenrastern musst du grid-template-rows nicht selbst setzen. Der Browser erzeugt automatisch neue Reihen, wenn mehr Items vorhanden sind als in die Spalten passen

Die Einheit fr

Die Einheit fr ist eine der wichtigsten Einheiten in CSS Grid. fr steht für fraction, also Anteil. Mit fr wird der verfügbare freie Platz im Grid aufgeteilt.

• grid-template-columns: 1fr 1fr 1fr;Das bedeutet: Teile den verfügbaren Platz in drei gleiche Anteile.
• grid-template-columns: 1fr 2fr 1fr;Das bedeutet: Teile den verfügbaren Platz in vier Anteile. Die mittlere Spalte bekommt zwei Anteile.

Warum fr statt px?

Pixelwerte sind fest. Das kann nützlich sein, aber auf unterschiedlichen Bildschirmgrößen schnell unflexibel werden.

grid-template-columns: 300px 300px 300px;

Dieses Grid ist insgesamt 900px breit, bevor Abstände dazugerechnet werden. Auf kleinen Bildschirmen kann das Layout dadurch überlaufen.

Mit fr passt sich das Layout besser an den verfügbaren Platz an.

Warum fr statt Prozent?

Prozentwerte funktionieren, sind bei Grid mit gap (mehr dazu in Gaps im Grid) aber oft unpraktisch. Da die Prozentbreiten bereits nahezu 100 % ausfüllen, wird der Abstand zusätzlich addiert und das Layout kann breiter werden als erwartet.

Mit fr berücksichtigt Grid den Abstand besser.