 Ja, schön, dass ihr noch so zahlreich hier erschien seid, um halb sechs ist ja schon relativ spät letzte Session heute. Ich möchte euch heute mal was zum Einstieg in CSS Grid erzählen. CSS Grid ist ja eine relativ neue Technologie in CSS und man kann damit ein paar coole Sachen machen und ich wollte mal zeigen, was, wie das funktioniert, mit welchen Mitteln man das machen kann und am Ende noch ein paar Beispiele zeigen. Wenn ihr Fragen habt, gerne zwischen rein, einfach handheben, ich rufe euch dann auf und kurz zu mir, ich bin die Jessica, ich bin selbstständige Siebenentwicklerin und komme aus Münster und wenn ihr mehr wissen wollt auf meinem Blog, wenn du, wie immer wieder kommt, kurz beim Kabelwackel. So, wir sind wieder da, genau. Beginnen wir mal mit der Evolution von Layout in CSS. Es ist so, dass es ganz am Anfang so von Beginn an das Internet, vielleicht bis so Mitte der 90er, überwiegend kein Layout, kein richtiges Layout gab. Also man hat einfach alles untereinander hin weggeknallt, überwiegend war es Text, vielleicht war schon mal ein Bild dabei, dann aber auch ein ganz klein und so hat man dann erst mal einfach die Informationen hingeschmissen. Irgendwann wurden die Informationen natürlich so ein bisschen unübersichtlich, weil je mehr Informationen da waren, da hat man so eine Textwüste vor sich gehabt, das vielleicht auch nicht so super. Auf jeden Fall hat man dann HTML-Tabellen gefunden und mir sich gedacht, man kann damit eigentlich ganz schöne Sachen machen, man kann dann so nebeneinander Content setzen und jetzt ist nicht mehr alles untereinander und ich muss auch noch ein weiterdrucken. Und bei den Tabellen war es zum Beispiel so, also bekanntes Beispiel ist die Webseite von Microsoft von ungefähr 1998. Könnt ihr mal eben Web Archiv nachgucken. Das sind sogar zwei Tabellen aus denen das Layout konstruiert wurde an der Stelle. Weiter ging es dann mit Floats, weil man sich gedacht hat, naja Tabellen, dass man missbraucht hier eigentlich ein HTML-Tag, was gar nicht dafür gedacht ist, Layouts anzuzeigen und man kam dann halt zu den Floats, womit man auch die Möglichkeit hatte, eine undefinierte Anzahl an Elementen relativ schön nebeneinander oder auch teilweise dann umbrechend untereinander anzuzeigen. Da war es dann aber so, naja, Clear Fixes muss man immer noch machen, sonst überlagern sich Sachen, war noch nicht so das Ware. Aber es gab halt nichts anderes. Im Prinzip wurden dann daraus Frameworks, weil man das Light war, immer wieder das Gleiche zu, also wiederholt, immer wieder das Gleiche zu programmieren und mit diesen Frameworks kamen erstmals so eine Art Grid zustande, in dem man einfach vordefiniert hat, diese Diffs hier sind, dieses Diff hier ist eine Zeile, darin mache ich meine Spalten und gut ist. Daraufhin kam dann Flexbox, weil man sich gedacht hat, naja, also irgendwie ist das auch nur so eine halbgare Lösung und mit Flexbox hatte man erst mal die Möglichkeit, das Ganze zu gestalten, allerdings nur in einer Dimension, also horizontal oder vertikal, aber nicht eben gleichzeitig und daraus entstand dann CSS Grid, weil es jetzt mit CSS Grid erstmals möglich ist, die Layouts in zwei Dimensionen gleichzeitig zu gestalten. Kommt dann mein Vima gleich wieder, bisschen mal im Kabel wackeln. Genau, seit wann gibt es CSS Grid und zwar gibt es das seit März 2017 ungefähr, da kam es erstmals im Firefox raus, zwei Tage später wurde in der neuesten Version von Chrome das veröffentlicht. Safari am 27. März und Microsoft Edge dann am 17. Oktober 2007, also innerhalb eines Jahres haben alle großen Browser mit einem Mal eine neue CSS Eigenschaften hinzugefügt, was es bis dato einfach nicht gegeben hat, weil das wurde immer, immer neue Sachen wurden immer nacheinander und nicht wirklich ein Absprach unter allen Browserherstellern umgesetzt. Man muss aber dazu sagen, der Internet Explorer ab Version 10 unterstützt bereits CSS Grid, allerdings in einer alten Spezifikation, weil Microsoft auch der, sag ich mal, der Ursprung ist, wo CSS Grid zuerst entwickelt wurde und man hat dann aber erst mal die alte Spezifikation gelassen und hat es dann aber mit dem Edge dann einmal komplett auf das Worf man sich beim W3C geeinigt hat umgesetzt. Genau, und wie gesagt, Layout in zwei Dimensionen ist einfach das Wichtigste, was man mit CSS Grid machen kann. Also so ein Beispiel, wie ihr da eben rechts seht, versucht das mal mit Floats nachzustellen. Ich glaube, ihr werdet klicklich scheitern. Genau, fangen wir mal an mit den Basics. Wie wird das ganze HTML definiert? Im Prinzip ist es relativ einfach. Man braucht ein Container Element und das ist das Eltern Element und alle, alle direkten Kind Elemente unter diesem, in diesem Container Element sind dann Grid, sogenannte Grid Items. Ich habe mal hier ein kleines Beispiel gemacht, und zwar haben wir hier eine Section, irgendwie ist das heute nichts. Was meinst du mit einem Bildmodi? Ja, muss ich es irgendwie halten? Probieren wir mal, ob es jetzt weitergeht. Okay, im Prinzip ist es das Beispiel jetzt. Wir haben hier eine Section, die die Klasse Grid hat, und darunter haben wir verschiedene Elemente, also eine Überschrift, ein Bild, ein Paragraph, ein Span, ein Link. Und im Prinzip ist das unser Grid Container und alles drunter sind die Grid Items. Prinzip, was ich im CSS sagen muss, ist Display Grid. Somit sage ich dem Ding, du bist ein Grid und alle darunter liegenden Elemente sind die Kind Elemente, die sich dann in einzelner Spalten und Zeilen oder in eine Zelle um genau zu sein einfügen lassen. Fangen wir mal an, wie das mit dem Spalten funktioniert. Und zwar gibt es da die Eigenschaft Grid Template Columns. Damit kann man die Breite aller Spalten definieren, die man in seinem Grid haben möchte. Und im Beispiel sieht das so aus, dass man sagt Display Grid und dann kommt Grid Template Columns und hier im Beispiel ist es 90 Pixel, 50 Pixel, 120 Pixel. Das heißt, der erste Spalt ist 90 Pixel breit, die zweite 50 Pixel und die dritte 120 Pixel. Und das Gleiche gibt es dann ungefähr auch für die Zeilen. Nämlich mit Grid Template Rows kann man dann auch die Größe der Zeilen definieren. Das sieht dann eben so aus, dass ich sagen kann 50 Pixel, 100 Pixel. Der erste ist 50 Pixel groß, der zweite 100 Pixel. Und jetzt denkt ihr euch, na ja, drei und vier, die sind ja gar nicht angegeben hier. Und da ist es so, beim CSS Grid hat die schöne Eigenschaft, wenn es mehr Elemente gibt, als man Spalten und Zeilen definiert hat, wird das Grid einfach erweitert. Und diese Spalten und Zeilen nehmen dann, also insbesondere die Zeilen, nehmen dann einfach die Höhe ein, die ihr Inhalt hat. Man kann die auch explizit noch angeben mit Grid Auto Rows und Grid Auto Columns, also es geht auch für beide Richtungen, dass man diese quasi auch noch die, die man eigentlich nicht explizit angibt, dass man die auch nochmal definieren kann, wie groß die Zeilen sollen. Einfach nur, um sich gestalterisch sicher zu sein, dass das nicht irgendwie zu groß wird oder zu klein wird, sondern dass es auch gut aussieht. Ja, eine Frage? Also die Frage war, ob man von Anfang an alles vordefinieren muss. Bei den Spalten, meine ich, ist es so, wenn man keine expliziten Spalten angeht, müsste es alles in eine Spalte sein. Da bin ich mir aber gerade echt nicht sicher, das müsste ich mal selber ausprobieren. Und ja, bei den Zeilen ist es so, eigentlich, also ich kenne das so, dass alles, was zusätzlich kommt, immer in neue Zeilen generiert wird und nicht in neue Spalten. Ich meine, das kann man umstellen. Wann wurde das deine Frage? Okay, noch eine Frage? Die Kind-Elemente. Die Kind-Elemente. Das würde jetzt, genau, das würde, genau, richtig, genau. Also es wird jetzt einfach alles untereinander an der Stelle angezeigt werden. Würden wir jetzt zwei Spalten definieren, würde es so sein, dass die H2 in der ersten Spalte ist und das Bild in der zweiten Spalte. Und dann würden die anderen Kind-Elemente, die nachfolgen, dann wieder in der ersten Spalte angezeigt werden, weil du ja nur explizit 2 genau angegeben hast. Eine schöne neue Sache, die es vorher so nicht gab, sind Abstände. Man braucht nicht, sich nicht mehr mit Margin oder Padding rumzuschlagen beim Grid, sondern man hat die Möglichkeit mit Grid Gap explizit anzugeben. Hallo, ich möchte, dass der Abstand zwischen meinen Spalten und meinen Zeilen eine bestimmte Größe hat. Und mit Grid Column Gap und Grid Row Gap kann man diese auch einzeln einsprechen. Also man kann den Abstand zwischen Spalten und Abstand zwischen Zeilen getrennt angeben. Man kann aber auch alles zusammen angeben mit Grid Gap. Wichtig ist, dass die Abstände nicht am äußeren Rand gemacht werden, sondern mittendrin. Also nur zwischen den Spalten und Zeilen. Und am außen sind die Elemente komplett an dem eltern Element außen dran. Hier in dem Beispiel ist es so, dass zwischen den Zeilen 20 Pixel Größe oder 20 Pixel definiert sind und zwischen den Spalten eben für ein Fremd. Man kann im Prinzip auch beide Sachen angeben. Also die zwei Sachen hier untereinander kann man auch mit Grid Gap zusammen angeben, wobei der erste Wert immer für die Row steht, also für die Zeile und der zweite immer für die Spalte. Darüber hinaus gibt es dann noch eine neue Einheit und zwar die Fraction Einheit, kurz FR. Die Fraction Einheit bietet dann natürlich auch eine ganz neue Art, wie man layouts gestaltet, weil sie im Prinzip den verbleibenden Platz einnimmt oder den verbleibenden Platz definiert, der dann übrig bleibt. Also angenommen, wir haben einen Grid mit verschiedenen Spalten, die auch mit unterschiedlichen Angaben gesetzt sind, wie Pixel, Wrem oder WEM oder Viewport With oder Viewport Hate, wäre beides möglich und da ist es so, man nimmt die gesamte Breite des elterne Elements, alles fest definierte wie Pixel, Wrem, WEM und so weiter, wird abgezogen, die Abstände werden abgezogen, also was ich mit Grid Gap definiere und alles andere, was übrig bleibt, dieser und definierte Rest, das ist eine Fraction. Und die kann ich wiederum unterteilen. Ich kann sagen, ich brauche das nur als eine Fraction, als ein Bereich, ich kann dann aber auch sagen, wie jetzt hier in dem Beispiel, dass ich das dritteln möchte. Also ich möchte einmal ein Drittel und einmal zwei Drittel haben. Somit sage ich, wie in einem Beispiel, die erste Spalt ist bitte 10 Pixel, die zweite ist 100 Pixel und dann teilen wir den Rest auf und drittel das. Ich möchte einmal ein Drittel und einmal zwei Drittel haben, das kriegt man somit Fractions hin. Wichtig bei der Gestaltung von Template Columns und Template Rows ist, wenn ihr mit Prozenten arbeitet, das könnt ihr tun. Allerdings, wenn ihr versucht das Ganze auf 100 Prozent zu bringen, also ihr macht eine Spalte 80 Prozent, eine Spalte 20 Prozent, dann kann Grid damit nicht richtig umgehen, sondern dann wird das 80 plus 20 und alles, was noch an Grid Gap dazwischen ist oder vielleicht auch mit anderen Spalten noch, die ja noch mit Pixel zum Beispiel definiert sind, das kann nicht davon abgezogen werden, das funktioniert mit Prozent nicht. Deswegen ist es besser Fraction zu nehmen, weil man dann wirklich ganz sauber den verbleibenden Platzleben aufteilen kann. Es ist, ja, klar, du kannst, also du kannst alles mischen, du kannst rein mit Fractions arbeiten, du kannst mit Fixen, Pixelangaben arbeiten, mit Rems, Ems, das kannst du mischen, wie du willst. Damit kann der Browser komplett umgehen oder die neueren Browser natürlich die Grid Unterstützung komplett umgehen. Eine interessante Sache vielleicht noch, wenn ihr hier einmal Grid Template Columns oder Grid Template Rows definiert, könnt ihr tatsächlich auch im Nachhinein noch bei Kind Elementen, also angenommen, ich würde jetzt hier sagen, ich ändere die erste Spalte nachträglich noch auf statt 10 Pixel auf 50 Pixel, wenn ich zum Beispiel eine spezielle Seite habe, wo das bisschen breiter sein soll, dann kann das auch nachträglich definiert werden und wird auch im kompletten Grid berücksichtigt. Also ihr könnt das natürlich einmal hier beim Elternelement definieren, aber wenn ich jetzt sagen würde, das hat die Klasse Column 1, dann kann ich der Klasse Column 1 sagen, du bist 50 Pixel breit und dann wird das auch mit in dem Grid berücksichtigt. Jetzt senkte euch natürlich, vielleicht wäre es ja so, ob man wie früher mit Bootstrap oder so, dann gebe ich mir jetzt 8 Spalten, die sollen alle gleich groß sein. Da muss ich ja schreiben eine fair, eine fair, eine fair, eine fair, eine fair, eine fair, eine fair, eine fair, eine fair ist vielleicht ein bisschen unübersichtlich. Deswegen gibt es die Repeat Funktion und da kann man dann ganz einfach sagen, gib mir acht mal diese Größe oder gib mir sechs mal diese Größe und somit spart man sich halt einmal Schreibarbeit und das wird auch alles übersichtlich ein Stückchen. Das sieht dann ungefähr so aus, ich habe einmal vier Zeilen, mit die jeweils 100 Pixels groß sein sollen und einmal drei Spalten, die jeweils eine fair groß sind, also quasi ein Drittel von dem. Sonst müsste ich ja schreiben 100 Pixel, 100 Pixel, 100 Pixel, 100 Pixel und dann eine fair, eine fair, eine fair. Wird ein bisschen unübersichtlich, gerade wie mehr Spalten und Zeilen ihr habt und falls ihr dann doch eine sich wiederholende Angabe habt, könnt ihr die so ganz einfach zusammenfassen. Was auch noch möglich ist, ist die Min-Max Funktion, das heißt man kann angeben, ich möchte, dass meine, meine Zelle in dem Fall mindestens so breit ist oder so hoch ist und maximal so breit oder so hoch ist. Das sieht dann im Beispiel so aus. Hier hat man einmal zwei Zeilen und ich sage, nee man hat eine Zeile. Ich habe einmal 100 Pixel und dann sage ich Auto, mit Auto kann ich sagen, ja sei so groß wie du einfach, wie dein Inhalt ist. Das ist auch nochmal eine explizite Angabe. Und hier unten bei den Spalten haben wir das Gleiche und ich sage hier, sei so groß wie du sein möchtest vom Inhalt, du darfst aber nur 50 Prozent groß sein. Ergo ist jetzt diese, diese Zelle hier unten, die ist maximal 50 Prozent breit, nimmt aber genau die Höhe ein, die ihr Kontent braucht, weil wir hier oben Auto angegeben haben. Was meinst du mit tendieren? Ja gut, das ist ja davon abhängig, das ist ja also, dass der vorderer, die vorderer Angabe ist die Minimum-Angabe und die hintere Angabe ist die Maximum-Angabe. Und dann bewegt dich dazwischen irgendwo. Du musst hier mindestens 100 Pixel groß sein, darfst aber so groß sein wie dein Inhalt eben es erlaubt oder vorgibt und hier musst du, kannst du so groß sein wie du willst, du darfst aber nicht größer sein als 50 Prozent. Das ist Min-Max im Prinzip. Ja, richtig, genau. Nee, das ist dann die Höhe, die der Kontent vorgibt. Also so groß wie dein Kontent ist, ist dann auch die Höhe der Zelle oder das Gritz, wenn du nur eine Zeile hast. Bin ich mir jetzt gerade echt nicht sicher, ob das das, was ich gerade gesagt habe, vielleicht doch nicht stimmt. Müß dich selber nachgucken. Warte mal kurz, warte mal kurz nochmal. Ja, das sollte gehen. Ich habe es ehrlich gesagt noch gar nicht ausprobieren. Müß dich selber mal ausprobieren, ob das so funktioniert. Okay, deine Frage? Nee, für die erste Spalte geht, du bist mindestens 100 Pixel groß, mindestens 100 Pixel hoch und so hoch wie, maximal so hoch wie dein Kontent ist. Entschuldigung, dann habe ich das durcheinander gebracht, tut mir leid. Nee, also diese Spalte hier, die erste, ist Min-Max Auto 50 Prozent. Was heißt, du bist mindestens so groß wie dein Kontent ist, aber maximal 50 Prozent der Gesamtbreite. Genau, die zweite Spalte ist hier 1 Fr, das ist der Bereich und die dritte Spalte ist 3 M, das ist der kleine Bereich hier. Pixel-Werte, die weniger sind als die anderen 50 Prozent? Müß dich ausprobieren, kann ich dir ehrlich gesagt so gerade nicht beantworten. Die können auch kürzer sein, nein ich, genau, die können auch kürzer sein, weil hier wird das ja gestreckt durch das 1 Fr, also nehmen alle die restliche Breite komplett ein und die letzte Spalte wird halt dann ganz nach außen geschoben. Genau, gehen wir mal weiter zu Auto-Fill und Auto-Fit, das sind zwei, ja, wie soll ich es beschreiben, Schlüsse-Wörter, steht ja drauf und damit kann ich sagen, wo wir jetzt auch wieder bei dem Thema sind, wird das gestreckt auf die ganze Breite oder wird nur so viel Platz eingenommen, wie eigentlich von den Spalten vorgegeben ist. Nutzt man bei den Repeat-Funktionen und da ist es jetzt bei dem Beispiel so, hier sage ich Grid-Template-Columns-Repeat-Auto-Fill sei mindestens 200 Pixel breit, aber maximal 1 Fr. Mit dem Auto-Fill sage ich im Prinzip, ihr seid also mindestens 200 Pixel groß, aber 1 Fr und mit Auto-Fill sind die Spalten, die jetzt nicht ausgefüllt sind, weil ich jetzt nur drei Angebe an der Stelle oder drei Elemente habe, die dann in diesem Grid drin sind, dass die zwar 1 Fr haben, aber auch größer als 200 Pixel sind, aber eben nicht die komplette Breite ausfüllen hier. Also das hier, da wäre dann Element 4, Element 5, Element 6. Als Gegensatz dazu gibt es Auto-Fit, womit man dann sagen kann, ja super, du bist mindestens 200 Pixel groß breit, aber darf es auch 1 Fr einnehmen. Und hier sage ich dann mit Auto-Fit, dass das, was übrig bleibt, also das, was hier übrig bleibt, hier hinten dieser Teil. Den Platz dürft ihr auch einnehmen. Also ich kann zum einen sagen, erstreckt euch über alles, wie in dem Beispiel. Ich kann aber auch sagen, naja, ihr könnt zwar so viel Platz einnehmen, wie ihr wollt, aber trotzdem sind für alle Spalten, ist für alle weiteren Spalten Platz vorhanden, falls noch mehr Elemente dazukommen. Ja, komplette Ausrichtung. Wobei ich da, doch das müsste gehen mit den Ausrichtungen. Also du hast, komme ich gleich noch zu, schneide ich ganz kurz an, du hast halt im Grid auch komplett Möglichkeiten, alle Elemente und allen Inhalt verschiedener auszurichten. Das war das Beispiel. Was ihr jetzt hier schon seht, ist diese lustigen Plippel hier. Das ist die Liniennummerierung. Das ist Cloud aus den Firefox Dev Tools und das sagt im Prinzip aus, oder sie sind eine Hilfe dabei, wie Elemente positioniert werden, man ja. Die hier? Die da? Das ist eine sehr gute Frage. Vielleicht sollte ich meine Folie noch mal überarbeiten. Ich überlege gerade, wo ich das Beispiel her habe. Ich glaube, ich weiß, wo ich es her habe. Wir können da vielleicht gleich noch mal drauf gucken, wenn da die Zeit bleibt. Linienummerierung. Genau. Ist vielleicht am Anfang ein bisschen schwer zu verstehen, weil das irgendwie nicht so ganz der Zählweise entspricht, die man so eigentlich kennt. Aber in den Firefox Dev Tools besteht da noch eine Frage? Ja, ich weiß. Besteht da noch eine Frage? Okay. Firefox Dev Tools. Diese diese Ansicht bekommt man, wenn man die Firefox Dev Tools aufmacht und sich ein Grid ansieht und dann kann man ja auf der einen Seite sieht man ja die CSS Angaben. Dann gibt es so ein kleines Hashtag im Prinzip vor dem Wort Grid, wenn Display Grid steht. Wenn man da draufklickt, kann man sich die Linienummerierung dazu anzeigen lassen. Und die Linienummerierung funktioniert so, dass es beginnt außen an der ersten Spalte und Zeile. Also das ist hier für die Zeilnummerierung und das ist für die Spaltenummerierung und das hier für die Zeilnummerierung. Und es geht so, dass man hier mit eins anfängt. Hier geht es mit zwei weiter, drei, vier. Das heißt, man hat immer ein Zähler mehr, als es Elemente gibt. Das ist am Anfang vielleicht ein bisschen schwer zu verstehen. Ich habe mich da auch schwer getan. Gleiches gilt dann natürlich für die Zeilen. Und hier unten seht ihr, dass das Ganze genauso rückwärts geht. Also ich kann auch sagen minus eins. Ich kann ja jedes Element auch wirklich komplett fest definieren, in welcher Spalte und in welcher Zelle es vorkommt oder ob es sich über mehrere Zellen erstreckt. Das geht da zum Beispiel auch. Genau. Ist es natürlich so, was ist denn mit älteren Brousern? Die einfachste Variante ist, um ältere Browser zu unterstützen, dass man einen Fallback macht, entweder mit Flexbox oder mit Floats, wie man das bisher kennt. Wenn es wirklich darum geht, ich muss jetzt noch Internet Explorer 8 oder so, oder noch einen ganz alten Browser unterstützen, der damit nicht umgehen kann. In CSS ist ja Cascading Style Schieds. Das heißt, wenn man ganz oben was definiert und dann definiert man das unten weiter unten in der CSS-Datei noch mal oder definiert es anders, ändert zum Beispiel die Farbe, dann wird das überschrieben. Also es wird immer das letzte Element oder die letzte Eigenschaft verwendet, die in dem CSS steht. Und das kann man sich zur Nutze machen, wenn man sagt, okay, das mache ich jetzt erstmal mit Floats, so wie ich es bisher gemacht habe, damit es auch für ältere Browser sichtbar ist. Und dann kann ich mit dem Feature Curry Add Support sagen, hey, Browser, kannst du eigentlich CSS Grid? Und dann überschreibe ich alles, was ich vorhin geschrieben habe mit meiner neuen Grid Spezifikation und kann dann sagen, Browser, wenn du Grid kannst, nutze Grid und alle Browser, die kein Grid können, den sage ich dann, ja, dann nutze halt Float oder Flexbox nach dem, was da die passendere Methode ist. Und man muss nicht, also ich finde, es muss nicht immer explizit Pixel genau eins zu eins in jedem Browser aussehen, weil wenn man das versucht wird, man irgendwann wahnsinnig, ist einfach so. Und das hört sich jetzt vielleicht komisch an, wenn ich sage, ja, dann sieht das vielleicht anders aus oder man passt das nicht, oder dann passt das einfach nicht, wie das EME8 aussieht und dem Edge 1718, ich weiß gerade nicht, was die aktuelle Version ist, ja, aber dann ist das so. Man muss es nicht allen gerecht machen, aber man muss dafür sorgen, dass die Inhalte einfach lesbar bleiben. Ich habe das jetzt alles wirklich am Grid nur angerissen. Es gibt dann noch ein paar mehr Sachen, mit denen man lustige, lustige Sachen machen kann und zwar die Spannweite einer Zelle zum Beispiel. Man kann sagen, hallo, du erstes Element, du erstreckst dich über die komplette Spaltenbreite oder nur bis zur Hälfte oder von hier nach da. Kennt ihr vermutlich, wenn ihr ja schon mal mit html-Tabellen gearbeitet habt, da gibt es auch Cross-Band, Rose-Band, Prinzip genau das gleiche, dass man sagt, du bist einfach größer. 11 Formen sind aber noch nicht möglich. Noch nicht, vielleicht kommt es noch in der nächsten Spezifikation, wie weiss, aber bisher immer nur als kompletter Block. Dann gibt es Grid Areas und dann kann man sagen, dass mehrere Zellen zu einer Area definiert werden können. Also wenn ich jetzt zum Beispiel mir ein ganzes Layout damit CSS Grid bastelt, dann kann ich sagen, hallo, die erste Zeile mit den 4, 5, 6, 7, 8 Spalten, das ist meine Header Area. Definiere das als Area und dann kann ich ein Element dort reinsetzen und das dann auch ganz einfach mit Media Queries im CSS mein komplettes Layout umgestalten. Das wäre jetzt aber zu tief, um da jetzt noch einzusteigen. Eine andere Sache ist Überlappung. Es ist so, dass man auch Dinge komplett überlappen kann. Also das war vorher, wer das vorher mal probiert hat, der weiss, dass es vielleicht nicht ganz so einfach ist und so gibt es da eine sehr einfache Lösung auch in dem Grid Zellen zu überlappen, zum Beispiel Inhalte zu überlappen. Und Ausrichtung, ich will jetzt nicht explizit darauf eingehen, weil das wirklich sehr, sehr, sehr viel ist, aber ich kann gleich meine Beispielseite zeigen, wo viele Beispiele mit drauf sind. Man kann alles im Prinzip ausrichten, so wie man es braucht, horizontal wie vertikal. In meinem Blog habe ich noch eine Linkliste zusammengetragen, die hatte ich in älteren, jetzt, also die Folien sind bei mir auch komplett online. Aber so unter diesem Link findet ihr das auf meinem Blog, bitte. Auf YouTube weiss ich gar nicht. Ich wollte gerade sagen, ich bin noch nicht auf YouTube. Genau und ja, danke schön fürs Zuhören. Da hinten war noch eine Frage. Okay, also die Frage ist, ob ich das schon mal benutzt habe. Ich habe es schon mal benutzt. Überwiegend dafür für einzelne Content-Bereiche erstmal. Ich habe natürlich auch schon ein bisschen rumgespielt, wie kann man das komplett mit Laos gestalten, also es geht auch. Ich habe es zum Beispiel auf meinem Blog, ich sage jetzt nicht wo, aber ich habe es auf meinem Blog schon mal als CSS Grid versteckt. Wenn es euch interessiert, würde ich gleich mal gucken, ob ich, ich habe nämlich nur ein paar Links vorbereitet, man den hier einmal rüber geschoben kriegt. So, das ist eine Seite, die, wo ist mein Maus, da ist mein Maus, die mit CSS Grid ergemacht ist. Und jetzt zeige ich euch mal, was im Extremfall damit möglich ist. Distanz ist das nicht so. So, nochmal den mal hier klein und ich ziehe das jetzt einfach mal groß. Ich ändere nur die Größe, mehr mache ich nicht. Es ist kein Neuladen der Seite. Im Prinzip ist so was auch komplett möglich, weil du halt, weil ihr halt einfach verschiedenste Sachen machen könnt, verschiedenste Darstellungsmöglichkeiten haben könnt. Und das ist einfach nur ein bisschen CSS und ein paar Mediacurves dazu, weil man es kann. Warum muss man das machen bei man es kann? Genau, das ist auch noch ein Beispiel aus meiner Link-Liste. Ich muss mal gucken. Ist nur wegen alles CSS. Also ich kann den Text markieren, das ist kein Bild. Das ist einfach CSS mit, als Grid einmal umgesetzt. Jetzt muss ich mal gucken. ShopExamples, war das diese Link, der Link. Ja, auf jeden Fall gibt es hier noch einiges mehr. Und hier gibt es dann auch mal so eine Seite, da habe ich mal gefunden, wo es verschiedene, ja, GridExamples.com, wo die, wo Grids verwendet werden. Eine andere populäre Seite ist Slack. Da habe ich zum Beispiel auch schon gefunden, dass die ein CSS Grid eingesetzt haben. Das ist das hier. Wenn ich jetzt auch feature item, oh Gott, GridContainer, das müsste der sein, oder? Ja. So, jetzt habe ich hier unten, hier seht ihr Display Grid, wenn man es lesen kann. Und hier vorne ist so ein Icon drin und damit kann ich eben diese Liniennummerierung ein- und ausschalten. Seht ihr jetzt okay, hier ist das Grid, das sind die einzelnen Elemente und hier habe ich jetzt so ein Grid Gap dazwischen, so kann man damit erkennen. Man kann das auch noch einstellen, aber ich sehe das hier gerade nicht. Kann ich dann aber noch im Einzelfall zeigen. Noch eine Frage? Die Frage ist, ob das, ob man CSS Grid solch mal in einem Framework verwursten kann, um das mal abzukürzen und wie meine Einschätzung dazu ist. Also ich persönlich glaube nicht, dass man jetzt wirklich noch Frameworks braucht. Also wenn man sich wirklich, sagen wir es mal so, man braucht vielleicht noch Frameworks, um jetzt, sag ich mal, sich wiederkehrende Elemente zu definieren. Also Buttons oder solche einzelnen kleineren Elemente. Aber dass man jetzt, sag ich mal, ein Framework braucht, wo ich mit CSS Grid irgendwie was definiere, meiner Meinung nach nicht. Man braucht eigentlich keine Frameworks für. Was jetzt natürlich passieren wird, man kann das schon natürlich komplett einsetzen. Bin ich da noch? Aber ich glaube halt nicht, dass man jetzt explizit noch sagen muss, ja, wir müssen da jetzt noch mal ein Framework verbusteln. Also man kann beide Sachen nebeneinander nutzen. Also du kannst natürlich dein Bootstrap weiter nutzen, wenn du zum Beispiel Bootstrap irgendwo einsetzt. Du kannst aber auch einfach mit Progressive Enhancement sagen, okay, ich verbessere jetzt diesen einen Teil und mache daraus ein Grid und der Rest bleibt komplett gleich, so wie es vorher war. Genau, dass du das halt rausnimmst. Nein, nicht überschreiben, dass du einfach das Bootstrap an der Stelle rausnimmst und das rein mit CSS machst. Ja, deadlift? Also die Frage ist, ob ich mir vorstellen kann, ob es mal so einen guten Bergblock geben wird, womit man ein CSS Grid komplett so ein mit allen Einstellungen zusammen basteln kann. Also es gibt so einen Generator, es gibt so einen Generator schon, der ist halt bald nicht in guten Berg drinnen, sondern das ist so eine externe Seite. Da kannst du auch schon eigentlich sowieso so viel spalten, sowieso so viele Zeilen, die sollen so groß sein, das gibt es schon. Ich sag mal so, ob man das nachher jetzt, also jetzt, jetzt nicht, noch nicht, wird sich zeigen, sag ich mal, wie gut ein Berg selbst sich entwickeln wird, ob man dann wirklich komplette Layouts gestalten können wird und ob das dann überhaupt so gewünscht ist, dass man Teams quasi im Prinzip nur noch ein Index PAP und ein Style CSS hat und den Rest dann selber macht. In meiner Meinung nach brauchst du dafür aber auch gewisse Kenntnisse einfach in der Webseitengestaltung und vielleicht auch in der Technik her und da weiß ich nicht, ob das für eine breite Masse so praktikables an der Stelle. Die Frage ist, ob man lieber CSS Grid nehmen sollte oder Flexbox, ob man das ausschließen sollte oder zusammen nutzen sollte. Ich persönlich bin großer Freund davon, das zusammenzunutzen und es gibt Unterschiede, aber es sind natürlich auch relativ einfache Sachen, die man mit beiden erledigen kann. Da muss man halt wirklich immer gucken, ja, was macht dann mehr Sinn an der Stelle? Genau, ich wiederhole das nochmal kurz, also Anmerkung war, ob man, wenn man jetzt ein Beispiel hat, wo man den Futter hat, der unten immer fest ist, ob man da jetzt eher Flexbox nimmt oder eher Grid führt, also man kann ja beides dafür nehmen, soweit ich weiß. Und es kommt halt meiner Meinung nach immer auf die Präferenz darauf an. Klar, beim Flexbox ist es natürlich so, da hast du, wenn du den Futter immer unten haben willst, es ist natürlich einfacher mit Flexbox, weil du ja dann eine Dimension hast und bist dann frei innerhalb des Flexbox Containers dann wieder mit Grid zu arbeiten. Also das eine schließt das andere nicht aus, das können beide super zusammenarbeiten. Also ich würde nicht das eine dem anderen überpräferieren, weil beide so ihre eigenen Anwendungsfälle haben. Man muss einfach einmal gucken, was ist, sagen wir, die bessere Variante oder womit fühlt man sich zusammen? Also was ich hier gerade nochmal aufgemacht habe, ist GridLayout Verbreitung im Moment bzw. welche Browser unterstützen das alle und wie gesagt, die großen Browser hier sind soweit alle schon dabei, dass sie halt Grid können und auch, dass sie das verwenden können. Wie gesagt, die Nutzer eurer Seite müssen dann halt natürlich auch schon soweit sein, dass sie die Browser aktuell halten natürlich. Ich weiß nicht, ich kann es gerade nicht lesen, 84% müsste hier oben stehen. Ja, irgendwas mit 84,95%, wenn ich das richtig sehe. Wenn man einmal kurz zurück geht, wenn man den Button nicht, wenn man sich mal im Vergleich Flexbox anschaut, da sind wir auch bei 92% gerade. Also das können schon relativ viele Browser. Gibt dann hier so ein paar Spezialfälle, die das noch nicht können, aber die sind jetzt hier nicht in der Auflistung mit drin. Aber wie gesagt, also ob das eine oder das andere, muss man im Einzelfall einfach gucken. Okay, wenn keine weiteren Fragen sind, dann danke schön.