Web Layouts mit dem CSS Grid

19 September, 2021

Schnelleinstieg – Die wichtigsten CSS properties

.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 gegenüber anderen Grid-Systemen

Digitale Rundschau Logo

© Digitale Rundschau | Impressum