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
2. Ich bin selbstständige WordPress Theme-Entwicklerin und komme aus Münster. https://jessicalyschik.de Hallo! Ich bin Jessica Lyschik
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
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-.
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!
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
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
8. Spalten definieren Mit grid-template-columns lässt sich die Breite für die Spalten definieren. Jessica Lyschik // Einstieg in CSS Grid
9. section { display: grid; grid-template-columns: 90px 50px 120px; } CSS Beispiel Jessica Lyschik // Einstieg in CSS Grid
10. Zeilen definieren Mit grid-template-rows lässt sich die Höhe für die Zeilen definieren. Jessica Lyschik // Einstieg in CSS Grid
11. section { display: grid; grid-template-rows: 50px 100px; } CSS Beispiel Jessica Lyschik // Einstieg in CSS Grid
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
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; }
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
15. section { display: grid; grid-template-columns: 10px 100px 1fr 2fr; } CSS Beispiel Jessica Lyschik // Einstieg in CSS Grid
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
17. section { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr); } CSS Beispiel Jessica Lyschik // Einstieg in CSS Grid
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
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
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
21. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr); Jessica Lyschik // Einstieg in CSS Grid
22. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr); Jessica Lyschik // Einstieg in CSS Grid
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
24. Jessica Lyschik // Einstieg in CSS Grid Firefox DevTools
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.
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
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
28. Hast du Fragen? Du findest mich in den sozialen Netzwerken unter: @jessicalyschik Danke! Jessica Lyschik // Einstieg in CSS Grid