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