Eine Sammlung interessanter Fakten über CSS Grid Layout

Vor ein paar Wochen hielt ich einen Workshop über CSS Grid Layout. Da ich, wie die meisten von uns, auch noch neu in diesem Thema bin, habe ich bei der Vorbereitung der Folien und Demos viel gelernt.
Ich habe beschlossen, einige der für mich besonders interessanten Dinge mit Ihnen zu teilen.

Viel Spaß!

Negative Werte kleiner als -1 können für grid-row-end und grid-column-end verwendet werden

In vielen Codebeispielen und Tutorials sehen Sie, dass Sie grid-column-start: 1 und grid-column-end: -1 (oder die Kurzform grid-column: 1 / -1) verwenden können, um ein Element von der ersten bis zur letzten Linie zu spannen. Mein Freund Max hat mich darauf aufmerksam gemacht, dass es auch möglich ist, niedrigere Werte als -1 zu verwenden.

.grid-item {
  grid-column: 1 / -2;
}

Sie können zum Beispiel grid-column: 1 / -2 setzen, um die Zellen zwischen der ersten und der vorletzten Linie zu spannen.

Siehe den Pen Grid-Element von der ersten bis zur vorletzten Linie von Manuel Matuzovic (@matuzo) auf CodePen.

Es ist möglich, negative Werte in grid-column/row-start zu verwenden

Eine weitere interessante Sache an negativen Werten ist, dass Sie sie auch für grid-column/row-start verwenden können. Der Unterschied zwischen positiven und negativen Werten besteht darin, dass die Platzierung bei negativen Werten von der gegenüberliegenden Seite erfolgt. Wenn Sie grid-column-start: -2 setzen, wird das Element auf der vorletzten Linie platziert.

.item {
  grid-column-start: -3;
  grid-row: -2;
}

Siehe den Pen Negative Werte in grid-column/row-start von Manuel Matuzovic (@matuzo) auf CodePen.

Generierter Inhalt für Pseudo-Elemente (::before und ::after) werden als Grid-Elemente behandelt

Es mag offensichtlich erscheinen, dass durch CSS generierte Pseudo-Elemente zu Grid-Elementen werden, wenn sie sich innerhalb eines Grid-Containers befinden, aber ich war mir nicht sicher. Also habe ich eine schnelle Demo erstellt, um das zu überprüfen. Im folgenden Pen können Sie sehen, dass generierte Elemente zu Grid- und Flex-Elementen werden, wenn sie sich innerhalb eines entsprechenden Containers befinden.

Siehe den Pen Experiment: Pseudo-Elemente als Grid-Elemente von Manuel Matuzovic (@matuzo) auf CodePen.

Animation von CSS Grid Layout-Eigenschaften

Gemäß der CSS Grid Layout Module Level 1 Spezifikation gibt es 5 animierbare Grid-Eigenschaften

• grid-gap, grid-row-gap, grid-column-gap
• grid-template-columns, grid-template-rows

Derzeit wird nur die Animation von grid-gap, grid-row-gap, grid-column-gap implementiert und das nur in Firefox und Firefox Mobile. Ich habe einen Beitrag über die Animation von CSS Grid Layout-Eigenschaften geschrieben, in dem Sie weitere Details und eine Demo finden.

Der Wert von grid-column/row-end kann niedriger sein als der Startwert

In Level 4 des CSS Grid Garden Spiels habe ich gelernt, dass der Wert von grid-column-end oder grid-row-end niedriger sein kann als das jeweilige Startäquivalent.

.item:first-child {
  grid-column-end: 2;
  grid-column-start: 4;
}

Das Element im obigen Code beginnt an der 4. Linie und endet an der 2. Linie, oder anders ausgedrückt, es beginnt an der 2. Linie und endet an der 4. Linie.

Siehe den Pen Niedrigerer grid-column-end Wert als grid-column-start von Manuel Matuzovic (@matuzo) auf CodePen.

Verwendung des `span`-Schlüsselworts für grid-column/row-start und grid-column/row-end

Ein Grid-Element überspannt standardmäßig eine einzelne Zelle. Wenn Sie das ändern möchten, kann das `span`-Schlüsselwort sehr praktisch sein. Wenn Sie zum Beispiel grid-column-start: 1 und grid-column-end: span 2 setzen, überspannt das Grid-Element zwei Zellen, von der ersten bis zur dritten Linie.

Sie können das `span`-Schlüsselwort auch mit grid-column-start verwenden. Wenn Sie grid-column-end: -1 und grid-column-start: span 2 setzen, wird das Grid-Element an der letzten Linie platziert und überspannt 2 Zellen, von der letzten bis zur drittletzten Linie.

Siehe den Pen CSS Grid Layout: span-Schlüsselwort von Manuel Matuzovic (@matuzo) auf CodePen.

grid-template-areas und implizite benannte Linien

Wenn Sie Template-Bereiche in einem Grid erstellen, erhalten Sie automatisch vier implizite benannte Linien, zwei für die Benennung von row-start und row-end und zwei für column-start und column-end. Durch Hinzufügen des Suffixes -start oder -end zum Namen des Bereichs sind sie wie jede andere benannte Linie anwendbar.

.grid {
  display: grid;
  grid-template-columns: 1fr 200px 200px;
  grid-template-areas: 
    "header header header"
    "articles favorites posts"
}

.footer {
  grid-column-start: favorites-start;
  grid-column-end: posts-end;
}

Siehe ein Beispiel für implizite benannte Linien in diesem Pen.

Grid ist in der Insider-Version von Microsoft Edge verfügbar

Die Unterstützung für CSS Grid Layout ist ziemlich gut, da alle wichtigen Browser, außer IE und Edge, es unterstützen. Für viele Projekte können Sie noch heute mit CSS Grid Layouts beginnen. Die Unterstützung für Microsoft Edge wird wahrscheinlich bald kommen, da es bereits in der Insider-Version von Microsoft Edge verfügbar ist.

Wenn Sie mehr über Grids erfahren möchten, schauen Sie sich The Complete Guide to Grid, Getting Started with CSS Grid, Grid By Example und meine Sammlung von Grid-Demos auf CodePen an.