Einstieg in CSS Grid

Einstieg in CSS Grid

Vortrag auf der FrOsCon am 26.08.2018 im WordPress Workshop Raum.

25329b7e3ef73310bfab649a0e17b0a2?s=128

Jessica Lyschik

August 26, 2018
Tweet

Transcript

  1. 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
  2. 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 <table> 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
  3. 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-.
  4. 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!
  5. 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
  6. 7.

    <section class="grid"> <h2>Titel des Beitrags</h2> <img src="bild.jpg"> <p>Lorem ipsum dolor

    sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <span>26. August 2018</span> <a href="#autor">Jessica Lyschik</a> </section> HTML CSS section { display: grid; } Jessica Lyschik // Einstieg in CSS Grid
  7. 8.

    Spalten definieren Mit grid-template-columns lässt sich die Breite für die

    Spalten definieren. Jessica Lyschik // Einstieg in CSS Grid
  8. 9.

    section { display: grid; grid-template-columns: 90px 50px 120px; } CSS

    Beispiel Jessica Lyschik // Einstieg in CSS Grid
  9. 10.

    Zeilen definieren Mit grid-template-rows lässt sich die Höhe für die

    Zeilen definieren. Jessica Lyschik // Einstieg in CSS Grid
  10. 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
  11. 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; }
  12. 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
  13. 15.

    section { display: grid; grid-template-columns: 10px 100px 1fr 2fr; }

    CSS Beispiel Jessica Lyschik // Einstieg in CSS Grid
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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.
  19. 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
  20. 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
  21. 28.

    Hast du Fragen? Du findest mich in den sozialen Netzwerken

    unter: @jessicalyschik Danke! Jessica Lyschik // Einstieg in CSS Grid