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 

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

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 

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-. 

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! 

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 

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 

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

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

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

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

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 

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; } 

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 

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

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 

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

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 

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 

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 

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

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

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 

Jessica Lyschik // Einstieg in CSS Grid Firefox DevTools 

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. 

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 

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 

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