 Also, wenn es jetzt nicht super, super dringend ist und euch die Fragen vielleicht für ein Nachtevortrag aufheben könnt, wäre das total super, dann kann ich nämlich auch ein bisschen von der Zeit her gucken, weil ich weiß, dass der Vortrag beim letzten Mal so ein bisschen lange geworden ist, weil dann auch eine Diskussion entstanden ist, was erst mal nicht schlimm ist, aber ich denke mal so eine Diskussion am Ende, dann hat man einfach viel mehr von, wenn das okay für euch ist. Prima. Dann läuft. Ja, ist so schön, dass so viele von euch gekommen sind. Ich freut mich sehr. Ich erzähle euch heute ein bisschen was zum Einstieg ins CSS Grid, also was es ist, was es macht und was man damit eigentlich für coole Sachen machen kann. Ich bin die Jessica, ich bin selbstständige Team-Entwicklerin aus Münster und ich mache das jetzt schon, also Teams mache ich auch schon seit ein paar Jahren und insgesamt habe ich aber schon zwölf Jahre Berufserfahrung als Web-Entwicklerin auch mit anderen System. Fangen wir mal an mit der Evolution von Layout in CSS. Es ist so, dass damals, als das Internet anfing, gab es im Prinzip kein Layout, also man hatte einfach alles untereinander geklatscht, Texte, Bilder waren ja noch sehr klein damals, wenn überhaupt vorhanden, im Prinzip war es einfach nur einmal Text runter, aber man konnte sie sich im Internet angucken. Dann ging es weiter, dass man dazu übergegangen ist, irgendjemand hat mal kannte, mit Tabellen kann man eigentlich schon ziemlich coole Dinge machen, man kann auch Sachen nebeneinander darstellen, nicht immer nur unten untereinander und man hat dann die HTML-Tabelle einfach dafür, es braucht, ganz okaye Layouts hinzubekommen. Beispiel dafür ist zum Beispiel die Microsoft-Seite von Ende der 90er ungefähr. Dann ging es weiter mit Floats, kennt ihr wahrscheinlich alle, wenn man nicht ne Tabelle nutzen will, aber dann doch Inhalte nebeneinander darstellen will, Klassiker ist Content Insightbar, dann muss man, oder dann geht man ganz oft dazu über Floats zu nutzen, also Float Left, Float Right oder zweimal Float Left, dass es dann eben schön nebeneinander dargestellt wird, hat aber auch noch so ein paar nicht so schöne Eigenschaften wie überlappender Content oder solche Geschichten. Daraus entstanden dann Frameworks, weil Leute es leid waren, das immer wieder, wieder zu wiederholen, wie Bootstrap oder Foundation, mit denen dann einfach vorgegebene Konstrukte schon hatte, die im Prinzip dann schon auf Zeilen und Spaltenbasis basierten, sodass man einfach nur noch sich grob das Konstrukt zusammenschustern musste und dann einfach ein fertiges Layout hatte. Es hat einfach den Entwicklungsprozess weit vereinfacht. Daraus entstand dann, beziehungsweise vor ein paar Jahren entstand dann das sogenannte Flexbox. Mit Flexbox war es erstmals möglich in einer Dimension, also horizontal oder vertikal Elemente nebeneinander zu positionieren und auch in der Höhe zu definieren und viele coole Dinge damit zu machen, die vorher einfach mit Floats nicht möglich waren, zum Beispiel gleiche Höhe für die Kind-Elemente eines Containerelements. Und inzwischen sind wir bei CSS Grid angekommen, was uns ist eben möglich nicht nur in einer Dimension die Layouts zu gestalten, sondern eben in zwei Dimensionen. Zeige ich euch gleich, wie das funktioniert. CSS Grid ist relativ neu, gibt es erst, wie ihr seht Firefox hat es im März 2017 erstmals eingeführt in einer offiziellen Version, die für alle ausgerollt wurde, Chrome ist direkt hinterhergezogen und auch Safari und auch Microsoft hat im Edge Browser dann im Oktober 2017 CSS Grid vollständig implementiert. So schnell war glaube ich noch keine CSS Spezifikation in allen großen aktuellen Browsern ausgerollt und für alle die es interessiert, der Internet Explorer Abversion 10 kann auch schon CSS Grid allerdings in der älteren Spezifikation und mit dem MS Prefix. Wie ich schon sagte, zwei Dimensionen, also Layouts wie das hier zum Beispiel überhaupt gar kein Problem mit CSS Grid. Und jetzt denkt euch wahrscheinlich, okay, die zweite Spalte über zwei Zeilen, Gott, wie hat man das? Das kriegt man doch gar nicht hin, aber das kriegt man durchaus mit CSS Grid hin. Okay, kommen wir zu den Basics. Im HTML definiert man einfach ein Container Element, ein Eltern Element. Das ist dann der Grid Container und dann gibt es alle direkten Kind Elemente darunter werden automatisch zu Grid Items, die man dann eben in diesen Grid verteilen kann. Genau. Okay, das kann man jetzt ein bisschen schlecht lesen. Danke, Bima. Okay, ich lese es kurz mal vor. Also wir haben hier da einmal, ich habe hier ein Section Element genommen mit der Klasse Grid. Darunter habe ich eine H2, ein Bild, ein Paragraph, ein Span Element und noch ein Link. Und im Prinzip, was man einfach sagen muss, um das CSS Grid zu aktivieren ist, dass man sagt Section oder hier dann die Klasse Class Grid, Display Grid. Mehr muss man nicht tun. Eltern Elemente können diff sein, können Section sein Articles. Auch der Body kann ein Grid Eltern Element sein. Das geht auch. Und Kind Elemente kann im Prinzip wirklich alles andere sein. Hauptsache, es ist ein eigenständiges Element und es ist direkt unterhalb des Container Elements. Also ein eben wie hier im Beispiel hat zwei Image, Paragraph, Span usw. Spalten definieren fangen wir mal damit an die CSS Eigenschaften für nennt sich Grid Template Columns. Und dafür kann man jetzt sagen, okay, man hat ein Grid, ein Container. Und jetzt will ich in diesem Beispiel drei Spalten definieren. Eins, zwei, drei. Dann sage ich einfach, hey, Grid, Display Grid, Grid Template Columns. Und dann gebe ich an, was ich da, wie breit ich die Spalten haben möchte. 90 Pixel, 50 Pixel, 120 Pixel. Ich kann auch Rem nehmen. Ich kann auch andere Einheiten nehmen. Ich kann sie auch alle mischen, alles gar kein Problem. Was passiert eben, wenn es aber mehr Elemente gibt in dem. In dem Grid, als es Spalten gibt, seht ihr schon, es wird einfach in die nächste Zeile umgebrochen. Also es gibt drei definierte Spalten und der Rest wird dann eben in die nächste Zeile anhand ihrer Reihenfolge eben umgebrochen. Mit die Zeilen kann man natürlich genauso definieren, nennt sich Grid Template Rows. Und das sieht dann so aus, gleiches Spiel, Grid Template Rows, 50 Pixel, 100 Pixel. Also der erste Block ist 50 Pixel groß, der zweite ist hier 100 Pixel groß. Und hier ist das Schöne, wenn es mehr Inhalte gibt, ebenso wie bei den Spalten, wird das bei den Zeilen einfach, kommt einfach unten drunter dran. Und hier gibt es die Funktionalität, dass die Inhalte beziehungsweise die Elemente, die nicht mehr in das Grid passen, die nehmen einfach die Höhe ein, die ihr Inhalt hat. Also ist das ein Bild, das 300 Pixel groß ist, ist diese Zeile 300 Pixel groß. Ist das ein Bild mit oder ist das ein Absatz mit zwei Zeilen? Ist es halt so groß, wie der Absatz mit zwei Zeilen braucht? Das nennt man eben impliziertes Grid und das hier die ersten beiden würde man das explizite Grid nennen, weil man explizit angegeben hat. Ich möchte, dass diese zwei Zeilen so groß sind und alle anderen sind das implizierte Grid und die werden dann einfach nehmen, die Höhe ein, die ihr Inhalt einnimmt. Und man kann auch sagen mit den Angaben Grid Auto Columns und Grid Auto Rows, soll das implizierte Grid, also Zeilen oder Spalten, eine gewisse Höhe für sich haben, also sollen die immer mindestens 50 Pixel groß sein, oder sollen die immer mindestens 100 Pixel groß sein oder drei remmen oder was weiß ich. Genau, eine sehr coole Sache ist Abstände. Also wir haben jetzt ein Konstrukt von Zeilen und Spalten. Und wer schon früher mal versucht hat, Abstände dazu definieren, kam ja gerne mal ins Schwitzen dabei. Mit CSS Grid ist das absolut kein Problem, weil man es eben schön angeben kann. Man hat eben einmal Grid Gap, was gleichzeitig für Spalten und Zeilen Abstände gilt, man kann aber auch mit Grid Column Gap und Grid Row Gap Gap diese unterschiedlich angeben. Also wenn man die Spalten, der Abstand zwischen den Spalten größer sein soll als zwischen den Zeilen, kein Problem. Und wie ihr es jetzt hier in dem Beispiel seht, außen an den Abständen, also an den Außenrendern werden diese Abstände nicht gezählt, nur wirklich innerhalb zwischen den Zeilen und Spalten. So muss ich mal gucken, Grid Row Gap, genau. Also mit Grid Row Gap wird halt gesagt, nimm den zwischen die Zeilen, zu viele Zeilen zu viel Spalten und Column Gap eben zwischen den Spalten. Also die fünf Remmen sind hier und die 20 Pixel sind hier. Man kann die auch gleichzeitig unterschiedlich für beide definieren und einfach im Grid Gap zusammenschreiben. Würden hier nur 20 Pixel stehen, wäre es so, dass überall es für beide gelten würde, Spalten und Zeilen Abstände. Genau, der erste steht dann halt für die Row Gap. Also wie hier oben in dem Beispiel, wenn man es lesen kann, hier steht 20 Pixel bei Grid Row Gap und hier unten sind die 20 Pixel an erster Stelle und bei Grid Column Gap stehen die fünf Remmen und die sind hier an der zweiten Stelle, genau. Kommen wir zu dem Feature, was mir persönlich echt am besten gefällt an CSS Grid, eine neue Einheit. Wahrscheinlich wäre noch nichts viel, aber ich würde sagen, war es schon wieder. Wir haben doch Pixel, wir haben doch Rem, wir haben doch EM, wir haben Viewport With, Viewport Height, wir haben Prozent, wir haben doch noch so viel anderes, aber Fraction ermöglicht es uns erstmals mit CSS Grid richtig coolen Scheiß zu machen. Die Einheit wird mit FR abgekürzt für Fraction und damit kann man definieren, ich kann Fixe, Spalten oder Zeilen definieren, 300 Pixel, 3 Rem, was auch immer. Und ich kann aber sagen, teile den restlichen verbleibenden Platz auf, entweder in eine Spalte oder in Endspalten mit der Fraction Einheit. Das definiert, das berechnet sich so, man hat die Gesamtbreite. Gesamtbreite ist eben das komplette Elternelement der Grid Container und dann wird gesagt, alle fest definierten Angaben, wenn ich einmal 200 Pixel habe auf der ersten Spalte und einmal 500 Pixel auf der vierten und habe dazwischen noch ein bisschen Platz. Und er soll sich im Responsive Verhalten ein bisschen verkleinern mit der nach der jeweiligen Viewport Größe, also nach der Größe des Devices. Dann zieh mal erst mal die 200 Pixel und die 500 Pixel ab. Zieh auch noch ab, dass du, wenn ich Grid Gap angegeben habe, zieh das auch noch ab. Und das, was übrig bleibt, was der Browser dann berechnet, an Platz, das wird halt dann für die Fraction Units genutzt. Genau, dann machen wir das. Okay, also im Prinzip im Beispiel hier habe ich jetzt so genommen, ich habe einmal die erste Spalte, hat 10 Pixel, die ist relativ schmal. Die nächste, die zweite hat 100 Pixel, die ist ein bisschen breiter. Und hier habe ich so aufgeteilt, dass ich nicht nur eine dritte Spalte habe, sondern ein, noch zwei weitere Spalten, wobei die dritte Spalte eine Fraction ist und die zweite Spalte zwei Fractions ist. Das heißt, ich habe insgesamt drei Teile oder ich möchte den verbleibenden Platz in drei Teile aufteilen, habe einen Teil als dritte Spalte und die anderen beiden Teile als zweite Spalte. Und so kann man den verbleibenden Platz mit durch fixe Elemente eben so schön variabel gestalten, dass trotzdem alles ausgefüllt wird. Eine wichtige Sache gibt es an der Stelle noch, und zwar, dass auch Prozente abgezogen werden. Aber bei Prozente ist es so, wenn man jetzt sagen würde, ich möchte einen Grid haben mit 80 Prozent, 20 Prozent, macht es nicht, weil Prozente werden 80 und 20 Prozent gibt in der Summe dann mehr als der, als er im Grid mehr als die, als das Containerelement groß ist und es wird darüber hinaus schießen. Deswegen gibt es diese Fraction Funktion, weil die nämlich genau berechnet, was bleibt mir wirklich an Platz übrig und wie kann ich diesen Platz besser aufteilen? Also müsste man statt 80 und 20 Prozent sagen, eben 4 Fr, 1 Fr. Das wäre dann das Equivalent für 80, 20 Prozent an der Stelle. Genau. Und eine andere Sache noch, wenn man jetzt zum Beispiel sagen würde, okay, ich definiere hier 200 Pixel, aber ich sage irgendwann später im CSS, na ja, eigentlich muss das Element doch ein bisschen größer sein. Dann wird das trotz, also wenn ich hier drunter stehen würde, Column 2 200 Pixel, dann ist es so, dass die in der Berechnung des Grids die 200 Pixel Anwendung finden und nicht nur die 100 Pixel, wie sie im Containerelement stehen, also auch das ist möglich. Jetzt denkt ihr euch wahrscheinlich, ich habe, möchte jetzt aber so ein Grid mit 8 Spalten machen oder 12 Spalten, wie man das so von Bootstrap oder Foundation kennt. Da muss ich ja jetzt 8 Mal hintereinander, wenn ich das mit der Fraction machen will, 8 Mal hintereinander, eine Faire, eine Faire, eine Faire, eine Faire, eine Faire schreiben. Braucht er nicht. Es gibt die Repeat Funktion und wenn man eine, eine Angabe hat, also ein gleich großes Grid definieren möchte, sagt man einfach Repeat, Grid Template Rows. Hier definieren wir erst mal die Zeilen, wir nehmen Repeat, sagen, ich will 4 Zeilen definiert haben, die jeweils 100 Pixel groß sein sollen, also 4 Zeilen 100 Pixel groß. Gleiches gilt für Grid Template Columns, Repeat, ich möchte 3 Spalten, die jeweils 1 Faire breit sind, 3 Spalten, die jeweils 1 Faire breit sind. So muss man nicht mehr, kriegt man das nicht mehr so ohne Übersichtlichen, sondern kann das schön in der übersichtlichen Form darstellen und der Browser übernimmt das dann dementsprechend. Man kann auch diese Repeat Angabe komplett mischen. Ich kann zum Beispiel sagen 200 Pixel, Repeat 4 und 4 mal 100 Pixel und dann nochmal 1 Faire oder sowas, auch kein Problem. Genau, dann gibt es die, einen Schritt weiter gibt es die Min-Max-Funktion und damit kann man dann sagen, die Spalte soll mindestens so groß sein, aber maximal so groß. So, jetzt muss man mal gucken. Wenn ich sage, ich möchte die Zeilen mindestens 100 Pixel hoch haben, aber dann sollen sie sich halt dem anpassen, wie der Inhalt einfach ist, weil ich den nicht vordefinieren kann. Dann schreibt man der Auto rein. Gleiches für die Spalten auch. Ich kann sagen, sei mindestens neben dem Platz ein, den du brauchst, aber du darfst maximal nur 50 Prozent annehmen des Platzes, den du zur Verfügung hast. So wie 1 Faire und 3 Rem, die gehören da oben noch mit rein. Was passiert hier? Also ich habe zwei Zeilen, die 100 Pixel groß sind oder wo mindestens 100 Pixel groß sein sollen und dann einfach, wenn mehr Inhalt drin ist, wird es einfach größer. Also die erste Zeile, da ist nicht mehr drin, die ist 100 Pixel groß. In der zweiten Zeile hat man ganz viel Text, also ist der mindestens 100 Pixel, aber der erweitert sich einfach, weil da einfach mehr Text drin steht. Und bei den Spalten ist es so, ich habe drei Spalten, eine Min-Max-Spalte, eine Spalte, die über Min-Max definiert wird, 1 FR und 3 Rem. 3 Rem werden definiert, der 1 FR ergibt sich dann einfach aus dem beiden Ersten. Und bei der ersten Spalte ist es so, dass sei mindestens so breit, wie du Platz brauchst, also nimm so viel Platz, wie du brauchst, aber du darfst nicht mehr als 50 Prozent des gesamten Containers einnehmen. Und so kann man das eben sehr coole Funktion machen, mit denen man eben Inhalte so schön definieren kann. So, jetzt war ich zu schnell, kein Problem. Genau, ich muss mal kurz nochmal nachlesen, jetzt bin ich ein bisschen raus. Genau, okay, gerade habt ihr schon gesehen Autofill und Autofit. Das ist eine Funktion, mit der man sagen kann, lieber Browser erstelle so viele Elemente wie möglich in dem Grid-Container, wie es gerade passend ist. Es gibt einen Unterschied zwischen Autofill und Autofit. Und bei der Repeat-Funktion habt ihr gerade schon gesehen, ich kann sagen, ich möchte jetzt drei Spalten oder vier Spalten, je nachdem, wie viel man da haben möchte. Aber was ist, wenn ich nicht weiß, wie viel Spalten das ist, oder wenn ich sage, okay, ich möchte ein komplettes Responsive-Design machen, ohne Media Queries, wie sehr kann ich oder wie viele Elemente kann ich denn dann nebeneinander packen. Stellt euch einfach einen Shop vor, wo ihr eine Produktübersicht habt mit Artikeln. Das ist ja dann einfach, in einer kleinen Version möchte ich einen Artikel haben, je größer es wird, zwei oder drei oder vier. Dafür sind die beiden Schlüsselwörter ganz prima. Fangen wir an mit Autofill. Mit Autofill bekommen wir so viele Spalten, die mindestens in der Beispiel jetzt 200 Pixel und maximal 1 FR bereit sind. Und hier in dem Beispiel kommen so viele, kommen durch die Vorgabe des Elternelementes so viele Spalten zusammen, dass es insgesamt sechs Spalten gebe. Aber da nur drei vorhanden sind, sagt er okay, 1 FR, aber Platz wäre für sechs. Gute mache ich halt die für sechs. Ich sehe sechs Spalten vor, aber ich fühle die Kind-Elemente dann nur für drei Spalten aus, weil das ist ja theoretisch noch Platz für mehr. Dagegen steht dann Autofit, mit dem man dann sagen kann, hey, du hast so viele Spalten, wie es dir möglich ist. Aber du hast eben nur drei, also ziehen wir die drei auf die volle Breite, weil sie ja 1 FR sind. Und eben die leeren Spalten werden halt dann verborgen, weil die dann eben nicht mehr ausgefüllt werden können. Würden jetzt hier eben vier oder fünf Spalten sein, würde das halt gleichzeitig in vier oder fünf Spalten aufgeteilt werden. Im Gegensatz eben zu hier, wo man dann sagt, okay, vordefiniertes Grid. Ich möchte nicht, dass die volle Breite einnehmen, sondern einem bestimmten Schema folgen. So, genau. Gerade habt ihr ja schon gesehen, in dem Beispiel hier, es gibt so komische Plöppel hier an den Seiten, und die sind alle nummeriert. Also hier 1, 2, 3. Hier steht 6, weil sie zusammengeklebt sind, 4, 5, 6. Und hier steht eine minus 1, hier eine minus 2. Was ist denn das eigentlich? Das ist die Liniennummerierung. Also jedes Grid, was definiert wird, bekommt eine automatische Liniennummerierung. Somit kann man halt auch einzelne Elemente in bestimmte, an bestimmte Positionen setzen. Also ein Kind-Element kann an verschiedene Positionen gesetzt werden. Das ist vielleicht am Anfang ein bisschen schwer zu verstehen, aber wenn man es einmal drauf hat, das ist gar nicht mal so schwer. Und zwar fängt die Linie 1, fängt außen an. Quasi ganz außen. Hier ist die erste Spalte quasi. Die zweite Spalte fängt hier an, die dritte hier. Und Linie Nummer 4 hört hier auf. Also das ist quasi das Ende des Grid. Es gibt also immer mehr, eine Liniennummerierung mehr als Grid-Elemente gibt. Und das Beispiel hier ist aus den Firefox DevTools. Die sind damit am fortschottlichsten, was CSS Grid angeht. Und da kann man sich das sehr schön anzeigen lassen, dass man hier eben, wie genau das Grid eben aufgebaut ist. Und das Ganze gibt es auch als negative. Also ich kann sagen, hier minus 1, also zähle ich bei den Spalten eben von hinten, minus 1, minus 2, minus 3, minus 4. Somit kann ich auch sagen, ein Element positionieren, du gehst von ganz hinten und erstreikst dich über 2 Spalten zum Beispiel. Genau. Jetzt fragt euch sicherlich, naja, wenn du sagst, so gibt es erst seit 2017 in allen großen Brousern, wie macht man das denn, wenn man das Grid nutzen will, aber halt noch aus welchen Gründen auch immer ältere Browser, die das nicht kennen, unterstützen soll. Die Variante, die mir persönlich am besten gefällt, ist, dass man ein Fallback schreibt in Flexbox oder mit Floats, also so wie man das vorher gemacht hat, und das dann eben mit dem Feature Query at Supports die Angaben überschreibt und dann das CSS Grid implementiert. Der CSS ist ja Cascading Style Sheets, heißt, das was ganz unten steht, ist das was genommen wird. Also wenn ich oben definiere, die Schriftfarbe soll rot sein und unten definiere die Schriftfarbe soll blau sein, dann wird die Schriftfarbe eben blau gesetzt und das Rot, was oben steht, wird ignoriert. Und genauso kann man das im CSS Grid machen, dass man sagt, okay, ich definiere erst mal als Flexbox zum Beispiel relativ einfach mein Layout, so wie ich es mir vorstellen könnte, wie es auch zum Beispiel in der Mobilansicht dann aussieht und sage dann einfach, okay, hey, Browser, unterstützt du Grid mit at Supports und dann kommt den Klammern Display Grid, so wie ihr die Media Curries kennt, Internet Media, Screen and Menus und so weiter. Und überschreibe dann quasi das, was ich vorher im Flexbox oder als Flows geschrieben habe mit dem vom CSS Grid und so stellt ein Browser, der CSS Grid unterstützt das Grid an und alle alten Browser bekommen halt eine Fallbacklöse, die relativ einfach ist. Aber es gibt noch ein paar mehr Sachen in CSS Grid, die ziemlich interessant sind und mit denen man viele Sachen machen kann. Das eine ist die Spannweite einer Zelle. Das heißt, ein Element kann über mehrere Spalten oder Zeilen vergrößert werden. Also ich kann zum Beispiel sagen, ich möchte die erste Zeile, möchte ich, dass das Element die komplette Breite einnimmt, also über alle Spalten geht, kein Problem. Oder über mindestens fünf Zeilen geht, auch kein Problem. Dann kann man Grid Areas definieren. Das sind, man kann mehrere aneinander liegende Spalten und Zeilen zu einer Area definieren. Das ist ein vorgefertigter Block. Das ist mein Header. Das ist meine Sidebar. Das ist mein Content. Das ist mein Futter. Alles gar kein Problem. Überlappung, etwas, was wer schon mal versucht hat, irgendwie ein Element zu überlappen mit einem anderen, wahrscheinlich ziemlich geflucht hat bisher, gar kein Problem. Man kann einfach auch definieren, dass verschiedene Elemente übereinander liegen und dann einfach mit dem Z-Index sagt, du liegst oben, du liegst unten. Und man kann somit auch sehr interessante Layouts gestalten. Und ein Thema, auf das ich explizit nicht eingegangen habe, weil es wirklich wirklich groß ist und den Rahmen hier sprengen würde, ist die Ausrichtung. Wenn der CSS Grid kann man halt alles komplett ausrichten. Also man kann sagen, die Spalten sollen ausgerichtet werden, die Zeilen sollen ausgerichtet werden, die Inhalte dort drin sollen ausgerichtet werden. Und eine schöne Sache ist halt, man hat auch kein Problem damit, wenn man sagt, ich möchte etwas horizontal und vertikal gleichzeitig zentriert haben, funktioniert. Ohne irgendwelche Hecks und ohne irgendwelche Krücken, die man dafür basteln muss. Ja, ich hoffe, ich habe euch neugierig gemacht auf CSS Grid. Ich habe hier noch ein paar Links zusammengesetzt. Die Folien sind schon immer im Blog online. Die Links werde ich auch noch gleich dort reinsetzen, dass ihr nicht die Folien durchspringen müsst. Und ich kann euch sehr ans Herz legen, wenn ihr im Englischen Flüssig seid, die Videoserie von Jen Simmons, die hat das CSS Grid mit einer Spezifikation gearbeitet, wie sie heute ist, und arbeitet auch noch weiter dran. Die erklärt das auch noch sehr, sehr gut. Und vor allem auch für Leute, die jetzt nicht so sehr drin sind, sehr verständlich meiner Meinung nach. Der hat auch viele coole Beispiele auf ihrer Seite, auf ihrer Seite genauso wie Rachel Andrews. Dann gibt es einen kostenlosen CSS Grid Kurs. CSS Grid Garden ist ein Spiel, da lernt man so spielerisch so ein bisschen die Funktionalitäten von CSS Grid können. Etwas, was ich immer sehr gerne offen habe bei meiner Arbeit, ist der Complete Guide CSS Grid von CSS Tricks. Und dann gibt es hier noch das Cheat Sheet hier unten. Das ist auch für die ganzen Ausrichtungsgeschichten, die ich euch gerade erklärt habe, noch sehr hilfreich. Wie gesagt, links gibt es dann immer im Blog gleich. Dankeschön. Was habt ihr für Fragen? Einmal. Ich muss die Frage kurz wiederholen für die Aufnahme, denn die Frage ist, ob es eine Funktion gibt, mit der man abhängig von der Responsiveness, die das Element irgendwo anders positionieren kann. Also grundsätzlich, das geht auch, soweit ich weiß, müsste ich selber nachgucken, aber ich meine schon, dass es funktioniert, dass du mit einer Media Query sagen kannst, dass du eben an einer anderen Position bist. Also die Grid Areas, die ich zum Beispiel gerade meinte, da ist es so, da definiert man einfach, du sagst Grid Template Area und dann malst du so ein bisschen auf. Ich kann dir das in einem Beispiel gleich zeigen. Header, Header, Header, Header in der ersten Zeile, Sidebar Content in der zweiten Zeile, Futter, Futter, Futter in der dritten Zeile, so wenn du jetzt mal ein grob Layout nimmst. Und dann kannst du sagen, mit einer Media Query, ich will aber, dass die Sidebar nicht, wenn sie links ist, dass sie nicht als erstes angezeigt wird, sondern unterhalb des Contents, auf dem Mobil Design. Und dann sagst du einfach für die Grid Template Area mit einem Media Query, Header, Header, Header, Content, Sidebar, Futter. So funktioniert das im Groben. Noch Fragen? Alle Fragen beantwortet? Nein? Wie gesagt, ihr könnt mich auch sonst danach auch noch fragen, wenn euch was Spezielles einfällt. Oder eben auf Twitter oder sonst wo. Sind auf meinem Blog online. Das ist kaluschik.de Gutenberg und CSS Grid. Ich guck mal zu Söhren rüber. Also eigentlich hat das so nichts miteinander zu tun, weil ja die Sims dann dafür zuständig sind und Gutenberg ja an sich eigenständig ist und erst mal nicht so viel an eigenen Entwicklungen mit sich bringt für CSS Grid. Ja. Die sind wahrscheinlich mit Flex gebaut, weil eben, also die Frage war, ob es zusammen, oder ob man irgendwie Gutenberg und CSS Grid das zusammen, ob es dann ein gutes Zusammenspiel für gibt. Und das ist so, dass CSS Grid eigentlich eher von den Themes übernommen wird und weniger von Gutenberg selber, auch wenn es in Gutenberg dieses Spalten-Element gibt. Und ich gehe mal davon aus, dass sie nicht auf CSS Grid umgestiegen sind, sondern dass es eben einfach als Fallback-Lösung noch die Flexbox-Version gibt. Und wäre vielleicht mal interessant zu gucken, ob es ein Issue dafür gibt, ob man das nochmal umstellt auf CSS Grid an der Stelle oder ob die Themes dann eben gucken müssen, dass sie selber für dieses, für das Spalten-Element bereitstellen. Okay, wenn es uns keine weiteren Fragen sind. Da ist noch eine Frage. Also die Frage ist, ob man CSS Grid mit Bootstrap kombinieren kann. Also du musst CSS Grid nicht explizit für dein komplettes Layout nutzen. Du kannst es auch für einen kleinen Teilbereich nutzen. Das ist gar kein Problem. Es gibt ganz viele Beispiele, auch bekannte News-Webseiten, die einfach nur in der Darstellung haben, so ein bisschen runter scrollt, dass sie immer Bild und Text einfach gemischt haben. Als eigenes Element so verschiedene Themen zusammengefasst werden oder so. Dass nur dieses Element quasi CSS Grid ist, aber der Rest von komplett Layout her auf Bootstrap basiert. Das ist alles kein Problem. Okay. Wenn keine weiteren Fragen sind, könnt mich auch gerne noch danach fragen. Dankeschön.