Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Einstieg in CSS Grid

Einstieg in CSS Grid

Vortrag auf der FrOsCon am 26.08.2018 im WordPress Workshop Raum.

Jessica Lyschik

August 26, 2018
Tweet

More Decks by Jessica Lyschik

Other Decks in Programming

Transcript

  1. Einstieg in CSS Grid
    F r O S C o n 2 0 1 8 / / 2 6 . A u g u s t 2 0 1 8

    View full-size slide

  2. Ich bin selbstständige WordPress
    Theme-Entwicklerin und komme aus
    Münster.
    https://jessicalyschik.de
    Hallo!
    Ich bin Jessica Lyschik

    View full-size slide

  3. Jessica Lyschik // Einstieg in CSS Grid
    Die Evolution von Layout in CSS
    Eine unbestimmte Anzahl an
    Elementen kann nebeneinander
    platziert werden.
    Floats
    Überwiegend Text, kaum Bilder,
    wenig Gestaltung
    Kein Layout
    Inhaltselemente nebeneinander,
    „Missbrauch“ des Tags
    Tabellen
    Erstmals ist die Layout-
    Gestaltung in zwei Dimensionen
    gleichzeitig möglich.
    CSS Grid
    Für die Float-Technik wurden
    verschiedene Systeme für
    Bootstrap und Foundation populär.
    Frameworks
    Bessere Möglichkeiten in der
    Gestaltung, in einer Dimension -
    horizontal oder vertikal.
    Flexbox

    View full-size slide

  4. Jessica Lyschik // Einstieg in CSS Grid
    Seit wann gibt es CSS Grid?
    Firefox: 7. März 2017, Version 52
    Chrome: 9. März 2017, Version 57
    Safari: 27. März 2017, Version 10.1
    Edge: 17. Oktober 2017, Version 16
    Der Internet Explorer ab Version 10
    unterstützt eine veraltete Spezifikation
    mit dem Präfix -ms-.

    View full-size slide

  5. Jessica Lyschik // Einstieg in CSS Grid
    Layout in zwei Dimensionen
    CSS Grid ermöglicht es,
    Inhalte in zwei Dimensionen
    zu positionieren.
    Ganz ohne Hacks, Libraries
    oder Frameworks!

    View full-size slide

  6. CSS Grid - die Basics
    Im HTML wird definiert:
    Grid Container: das Eltern-Element
    Grid Item: die direkten Kind-Elemente
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide


  7. Titel des Beitrags

    Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore
    et dolore magna aliquyam erat, sed diam
    voluptua.
    26. August 2018
    Jessica Lyschik

    HTML CSS
    section {
    display: grid;
    }
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  8. Spalten definieren
    Mit grid-template-columns lässt sich die Breite für die Spalten definieren.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  9. section {
    display: grid;
    grid-template-columns: 90px 50px 120px;
    }
    CSS Beispiel
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  10. Zeilen definieren
    Mit grid-template-rows lässt sich die Höhe für die Zeilen definieren.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  11. section {
    display: grid;
    grid-template-rows: 50px 100px;
    }
    CSS Beispiel
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  12. Abstände definieren
    Ohne Padding oder Margin, aber mit grid-gap können Abstände
    zwischen den Spalten und Zeilen definiert werden.
    Durch grid-column-gap und grid-row-gap
    werden diese einzeln angesprochen.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  13. section {
    display: grid;
    grid-row—gap: 20px;
    grid-column—gap: 5rem;
    }
    CSS Beispiel
    Jessica Lyschik // Einstieg in CSS Grid
    section {
    display: grid;
    grid—gap: 20px 5rem;
    }

    View full-size slide

  14. Die neue Einheit: Fraction
    Mit CSS Grid wird eine weitere Einheit eingeführt: mit Fraction,
    kurz fr wird der verbleibende Platz entsprechend aufgeteilt:
    Gesamtbreite - alle definierten Angaben - Abstände (grid-gap)
    = verfügbarer Platz für Fractions
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  15. section {
    display: grid;
    grid-template-columns: 10px 100px 1fr 2fr;
    }
    CSS Beispiel
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  16. Die repeat() Funktion
    Statt gleichen, sich wiederholenden Spalten- oder Zeilenangaben
    kannst du dir mit der repeat() Funktion Abhilfe schaffen.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  17. section {
    display: grid;
    grid-template-rows: repeat(4, 100px);
    grid-template-columns: repeat(3, 1fr);
    }
    CSS Beispiel
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  18. Die minmax() Funktion
    Die Spalten oder Zeilen sollen mindestens
    X groß oder höchstens Y groß sein?
    Die minmax() Funktion macht’s möglich.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  19. section {
    display: grid;
    grid-template-rows: minmax(100px, auto);
    grid-template-columns: minmax(auto, 50%)
    1fr 3em;
    }
    CSS Beispiel
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  20. auto-fill & auto-fit
    Statt einer festen Anzahl der Wiederholungen bei der repeat() Funktion
    anzugeben, gibt es zwei hilfreiche Schlüsselwörter:
    auto-fill und auto-fit.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  21. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr);
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  22. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr);
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  23. Die Sache mit der Linien-
    Nummerierung
    Bei jedem Grid sind Linien-Nummern vorhanden.
    Sie vereinfachen die Positionierung oder die Spanne einzelner Elemente.
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide

  24. Jessica Lyschik // Einstieg in CSS Grid
    Firefox DevTools

    View full-size slide

  25. Jessica Lyschik // Einstieg in CSS Grid
    Unterstützung
    älterer Browser?
    Ganz einfach: erstelle einen Fallback in Flexbox oder mit Floats.
    Mit dem Feature Query @supports kannst du dann diese Angaben überschreiben.

    View full-size slide

  26. Mehrere Elemente können zu einer Area definiert
    werden. Ein so definiertes Grid lässt sich
    kinderleicht von der Grundgestaltung her ändern.
    Grid Areas
    Ein Element kann über mehrere Spalten oder
    Zeilen vergrößert werden. Gemischte Layouts sind
    kein Problem!
    Spannweite einer Zelle
    Da geht noch mehr!
    Jessica Lyschik // Einstieg in CSS Grid
    Mit CSS Grid kann alles horizontal und vertikal
    ausgerichtet werden - es gibt insgesamt sechs
    Eigenschaften für alle Bedürfnisse.
    Ausrichtung
    Ein Textbereich soll ein Bild überlappen? Kein
    Problem. z-index ist dein Freund!
    Überlappung

    View full-size slide

  27. Jessica Lyschik // Einstieg in CSS Grid
    Ressourcen
    Videoserie von Jen Simmons
    Beispiele von Jen Simmons
    Grid by Example von Rachel Andrews
    Kostenloser CSS Grid Kurs
    CSS Grid Garden Spiel
    CSS Tricks: Complete Guide to CSS Grid
    Learn CSS Grid
    CSS Grid Cheatsheet

    View full-size slide

  28. Hast du Fragen?
    Du findest mich in den sozialen Netzwerken unter: @jessicalyschik
    Danke!
    Jessica Lyschik // Einstieg in CSS Grid

    View full-size slide