Großartige Web Layouts mit dem CSS Grid

    Inhalt

    1. Schnelleinstieg – Die wichtigsten CSS properties
    2. Was ist das CSS-Grid?
    3. Die Vorteile gegenüber anderen Grid-Systemen
    4. Die CSS properties ausführlich erklärt

    1. 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 einnehmen

    .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

    2. 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 unter Punkt 1. vorgestellten CSS properties können in diesem Codepen Snippet gleich selbst ausprobiert werden, gehe dazu auf Edit in Codepen (oben rechts):

    See the Pen CSS Grid 3-Column Layout – Basic by Peter Munro (@pete) on CodePen.

    CSS-Grid: dreispaltiges Gestaltungsrater

    Die oben beschriebene Einheit Fraction Unit kannst du ausprobieren, indem du im CSS Tab 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.

    3. Die Vorteile gegenüber anderen Grid-Systemen

    Neueste Beiträge

    JavaScript: Objekte erzeugen und Values abrufen

    Inhalt Grundlagen ArraysGrundlagen ObjekteObjekt mit enthaltenen ArraysObjekt mit verschachtelten Arrays 1. Grundlagen Arrays

    Ionic (V4): Bewährte User Interface Komponenten einfach implementieren

    Inhalt Anforderungen, um mit Ionic (V4) zu entwickelnImplementierung ausgewählter Komponenten ausführlich erklärt 1. Anforderungen, um...

    Git: Glossar

    Einige Git-Begriffe kamen in meinen Artikeln Git und die wichtigsten Befehle für den professionellen Einsatz und Git und die wichtigsten fortgeschrittenen Techniken...

    Git und die wichtigsten fortgeschrittenen Techniken

    Inhalt Schnelleinstieg - Befehle fortgeschrittener TechnikenKann man aus Git noch mehr herausholen?Fortgeschrittene Techniken ausführlich erklärt

    Linux Shell: Mit der Bash arbeiten

    Inhalt Schnelleinstieg - Die wichtigsten Shell-BefehleWas ist die Linux Shell?Shell-Befehle ausführlich erklärt 1. Schnelleinstieg -...

    Ähnliche Beiträge

    Kommentar schreiben

    Deinen Kommentar abschicken
    Gebe bitte deinen Namen ein