Fachbücher kompakt zusammengefasst

    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

    Angular: die wichtigsten Begriffe ausführlich erklärt

    Inhalt Begriffe in Angular und ihre BedeutungAllgemeinLifecycle-Hooks 1. Begriffe in Angular und ihre Bedeutung

    TypeScript: Grundlagen und Vorteile

    Inhalt Grundlagen TypeScriptVorteile der TypisierungBeispiele der TypisierungVariablen-Deklaration und InitialisierungArray-Deklaration und InitialisierungKlassen-Deklaration und Initialisierung ihrer EigenschaftenMethoden und die Initialisierung...

    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 und die wichtigsten fortgeschrittenen Techniken

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

    Ähnliche Beiträge

    Kommentar schreiben

    Deinen Kommentar abschicken
    Gebe bitte deinen Namen ein