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

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

    Windows PowerShell: Skript ausführen

    Inhalt Schnelleinstieg - Skript erstellen und ausführen Was ist ein PowerShell-Skript?PowerShell-Skript ausführlich erklärtFortgeschrittene Techniken 1....

    Windows PowerShell und die wichtigsten Befehle (Cmdlets)

    Inhalt Schnelleinstieg - Die wichtigsten PowerShell Befehle (Cmdlets)Was ist die Windows PowerShell?InstallationPowerShell-Befehle ausführlich erklärtFortgeschrittene Techniken

    Ähnliche Beiträge

    Kommentar schreiben

    Deinen Kommentar abschicken
    Gebe bitte deinen Namen ein