Einstieg in CSS Grid

Vortrag auf der FrOsCon am 26.08.2018 im WordPress Workshop Raum.

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 Slide

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

   View 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 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 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 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 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 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 Slide

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

   View 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 Slide

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

    View 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 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 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 Slide

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

    View 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 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 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 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 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 Slide

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

    View Slide