CSS Grid ist eine brandneue Technologie, die es uns ermöglicht, das Seitenlayout im Web auf eine leistungsfähige Weise zu gestalten. Es stammt aus der CSS-Spezifikation, aus der alles CSS stammt, einem technischen Dokument, an dem viele verschiedene Browserhersteller zusammengearbeitet haben, um dieses Ding zu schaffen. Dies ist das offizielle Dokument, auf das sich die Hersteller von Browsern beziehen, um herauszufinden, was sie eigentlich bauen sollen. Und wenn ein Browserhersteller jemals eine Frage hat oder es irgendeine Art von Verwirrung gibt, geht er zurück zu den Leuten, die für die Spezifikation verantwortlich sind, um die Spezifikation zu ändern, die Spezifikation zu verdeutlichen und sicherzustellen, dass die Spezifikation das ist, was sie sein soll.
Aus diesem Grund sind die Implementierungen von CSS Grid in den verschiedenen Browsern so gut aufeinander abgestimmt. Sie sind sehr kompatibel, weil alle auf der Grundlage dieses Dokuments arbeiten. Und die Spezifikationen und die Art und Weise, wie sie funktionieren, dieser Prozess funktioniert jetzt im Jahr 2017 so gut wie nie zuvor. Deshalb ist Grid auch sofort einsatzbereit. Das ist die Level-1-Spezifikation.
Es gibt einige Ideen, und ich werde über ein paar davon sprechen, was Grid in Zukunft tun könnte. Das wird in einer Level-2-Spezifikation niedergeschrieben werden. Grid Level 1 ist also fertig, es ist gebacken, es ist festgeschrieben. Das ist bereits in den Browsern zu finden.
Mit der Zeit werden noch weitere Funktionen hinzukommen, aber das ist alles, was wir im Moment haben.Schauen wir uns das also mal an. Hier können wir uns Inhalte vorstellen, die wir haben, oder Teile einer Benutzeroberfläche, die wir auf irgendeine Art und Weise gestalten wollen. Vielleicht haben wir eine Idee vor unserem geistigen Auge, wie diese gelben Kästchen angeordnet werden sollen. Wir werden ein Raster in CSS erstellen, um dieses Layout zu erstellen. Das ist also das Raster.
Sie entwerfen das Raster. Sie entwerfen die Spalten und Zeilen. Sie finden heraus, wie sie funktionieren sollen, und das gibt Ihnen dann Platz für verschiedene Teile, verschiedene Elemente, im Grunde für jedes Element im DOM. Diese Gesamtbox, die Box, die das Raster darstellt, die das Raster selbst enthält, wird als Rastercontainer bezeichnet, und dann wird jedes bestimmte Element, das auf dem Raster platziert wurde, als Rasterobjekt betrachtet. Es wird als Gitterelement bezeichnet.
Grid Items müssen direkte Kinder des Grid Containers sein. In diesem Beispiel gibt es also ein Hauptelement und innerhalb des Hauptelements haben wir ein div, div, div, etwas Text, ein weiteres div, etwas mehr Text, einen Abschnitt und eine Fußzeile.
Es spielt keine Rolle, um welche Elemente es sich handelt, aber sie müssen alle direkte Unterelemente des Hauptelements sein. Im Grunde wird also alles, was ein direktes Kind des Hauptelements ist, automatisch zu einem Gitterelement. Es hat keine andere Wahl.
Und tatsächlich sind diese Textstücke, dies ist ein anonymes Gitterelement und Hallo Welt, tatsächlich in „Elemente“ verpackt. Der Browser verpackt sie in ein so genanntes anonymes [Element], ein falsches, ein vorgetäuschtes Element. Für uns, die wir die Websites erstellen, existiert es nicht. Für die Hersteller von Browsern existiert es sehr wohl.
Aber es bedeutet, dass der Browser, wenn Sie zusätzliche Elemente haben, diese mit [anonymen Kästchen] umgibt, damit alles schön und ordentlich ist.
Er wird jede einzelne dieser [Boxen] nehmen und sie auf dem Raster platzieren. Eine andere Möglichkeit, die wahrscheinlich sehr verbreitet ist, besteht darin, eine ungeordnete Liste mit einer Reihe von Listenelementen zu erstellen. Die ungeordnete Liste ist der Gittercontainer und die Listenelemente sind die Gitterelemente. Oder hier sehen Sie body und innerhalb des body ist eine Überschrift, ein main und innerhalb des main ist ein article, innerhalb des article gibt es ein h1, ein p, eine figure. Außerdem haben wir unterhalb von body eine aside und eine footer.
Das bedeutet, dass die Kopfzeile, die Hauptzeile, die Nebenzeile und die Fußzeile alle direkte Kinder dieses body-Elements sind und auf dem Raster platziert werden können, das wir für body definiert haben.
Alles andere, wie article, h1, p, figure, sind Enkel oder Urenkel des Grid-Containers und können daher nicht in diesem speziellen Grid platziert werden. Wenn wir ein Raster auf body setzen, können nur die Kopf-, Haupt-, Seiten- und Fußzeile auf diesem Raster platziert werden. Das ist etwas ganz anderes als die mentalen Modelle, die wir mit den bisher verwendeten Werkzeugen hatten. Der ganze Weg von 960.
gs über Foundation bis hin zu Bootstrap waren diese Systeme so, dass man nur ein Raster hatte. Man hatte ein Raster und wendete es einfach auf die gesamte Website auf einmal an.
Das hier ist überhaupt nicht so. Wir werden mehrere Raster definieren und sie an verschiedenen Stellen auf der Seite verwenden. Und in diesem Fall, wenn ich ein Raster auf den Body lege, kann ich nur die Hauptelemente, die direkten Kinder des Bodys, auf diesem Raster platzieren.
