19 September, 2021

Großartige 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.

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

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

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

header {
  grid-row: 1;
  …
}

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

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


Einen ganz typischen Anwendungsfall mit zwei Parametern umgesetzt.

Die Vorteile gegenüber anderen Grid-Systemen

© Digitale Rundschau - Powered by Weblokal Developement.