Schnelleinstieg – Die wichtigsten CSS properties im CSS Grid

.container {
  display: grid
}

Dem Container die grid-Eigenschaft geben

.container {
  grid-template-columns: 2fr 2fr 2fr 2fr;
}

Festlegung von 4 Spalten, die jeweils 2 von 8 Einheiten (fr) an variabler Breite einnehme

.container {
  grid-template-rows: 300px;
}

Feste Höhe von 300px der Spalten definieren

.container {
  grid-gap: 20px;
}

Abstände von jeweils 20px zwischen den Columns definieren

.item-1 {
  grid-column: 1 / 4;
}

Das item-1 erstreckt sich von der 1. bis zur 4. Spalte (Start- / Endposition)

.item-1 {
  grid-row: 1 / 2;
}

Vertikale Streckung des item-1 von 1. zur 2. Reihe

Was ist das CSS Grid?

Mit dem CSS Grid lassen sich einfacher als je zuvor Gestaltungsraster aufbauen, die mit vergleichsweise wenigen CSS properties, ein funktionierendes und, zum Beispiel mit der Fraction Unit (fr), responsives Grid ermöglichen.

.three-col-layout {
  grid-template-columns: 2fr 2fr 2fr;
}

Die oben beschriebene Einheit Fraction Unit kannst du ausprobieren, indem du zum Beispiel die Klasse .three-col-layout auf ein dreispaltigen Layout setzt, bei dem aber alle drei Spalten mit jeweils 2fr gleich breit gesetzt werden

header {
  grid-row: 1;
  …
}

Oder du kannst ganz einfach die Sidebar mit Höhe des Headers beginnen lassen, indem der Header auf grid-row: 1

aside {
  grid-row: 1 / 3;
  …
}

und die Sidebar unter aside auf grid-row: 1 / 3 gesetzt wird.

Die Vorteile vom CSS Grid gegenüber anderen Grid-Systemen

Das CSS Grid lässt sich sehr schnell erlernen und ist einfach einzusetzen. Ein wesentlicher Vorteil ist die Flexibilität des spaltenbasierten Gestaltungsrasters. Mit der entsprechenden Einstellung erreicht man ein responsives Layout, das gut wartbar und einfach anpassbar ist.