Eine weitere Sammlung interessanter Fakten über CSS Grid

Letztes Jahr habe ich nach einem Workshop eine Sammlung interessanter Fakten über CSS Grid Layout zusammengestellt. Dieses Jahr habe ich an einem weiteren Workshop gearbeitet und einige weitere spannende Fakten über die Layout-Spezifikation, die wir alle so lieben, gelernt.

Natürlich werde ich mein Wissen nicht für mich behalten. Ich teile meine Erkenntnisse gerne wieder mit Ihnen, der CSS-Tricks-Community.

Verstehen, wie der `grid`-Shortcut funktioniert

Manchmal kann das Lesen und Verstehen von Teilen der Grid- oder eigentlich jeder anderen Spezifikation sehr schwierig sein.

Zum Beispiel hat es eine ganze Weile gedauert, bis ich verstanden habe, wie man die `grid`-Kurzschreibweise richtig anwendet. Die Spezifikation besagt, dass die gültigen Werte sind

<‘grid-template’> | <‘grid-template-rows’> / [ auto-flow && dense? ] <‘grid-auto-columns’>? | [ auto-flow && dense? ] <‘grid-autwo-rows’>? / <‘grid-template-columns’>

Man kann das verstehen, wenn man sich Zeit nimmt oder Erfahrung im Lesen von Spezifikationen hat. Ich habe verschiedene Kombinationen ausprobiert und alle sind fehlgeschlagen. Was mir schließlich geholfen hat, war eine Anmerkung in der Spezifikation

Beachten Sie, dass Sie in einer einzigen Grid-Deklaration nur die expliziten oder die impliziten Grid-Eigenschaften angeben können.

Rachel Andrew hat eine Reihe von Beiträgen, die helfen zu erklären, wie man eine Spezifikation liest, am Beispiel von CSS Grid.

Wir können also eine Vielzahl von Dingen mit der `grid`-Kurzschreibweise angeben, aber eben nicht alle gleichzeitig. Hier sind einige Beispiele.

`grid` anstelle von `grid-template` verwenden

Die Eigenschaft `grid-template` ist eine Kurzschreibweise für die Festlegung von `grid-template-columns`, `grid-template-rows` und `grid-template-areas` in einer einzigen Deklaration. Das Gleiche können wir mit der `grid`-Kurzschreibweise tun, die etwas kürzer ist.

grid: "one one" 200px 
      "two four" 
      "three four" 
      / 1fr 2fr;

/* shorthand for: */ 
/*
  grid-template-areas: "one one" "two four" "three four";
  grid-template-rows: 200px;
  grid-template-columns: 1fr 2fr;
*/

Diese Kurzschreibweise erstellt drei Zeilen und zwei Spalten mit vier benannten Grid-Bereichen. Die erste Zeile hat eine explizite Höhe von `200px`, während die zweite und dritte eine implizite Höhe von `auto` haben. Die erste Spalte hat eine Breite von `1fr` und die zweite eine Breite von `2fr`.

Siehe den Pen grid shorthand – areas, explicit rows and columns von Manuel Matuzovic (@matuzo) auf CodePen.

Möchten Sie mehr über den Unterschied zwischen einem expliziten und einem impliziten Grid erfahren? Lesen Sie diesen Beitrag, den ich zu diesem Thema geschrieben habe, hier auf CSS-Tricks.

Wir müssen keine Bereiche angeben, wenn wir sie nicht benötigen. Wir können die `grid`-Kurzschreibweise nur zur Definition von expliziten Zeilen und Spalten verwenden. Die folgenden beiden Snippets tun im Wesentlichen dasselbe

grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;

grid: 100px 300px / 3fr 1fr;

Umgang mit impliziten Zeilen und Spalten

Es ist möglich, die `grid`-Kurzschreibweise auch zur Angabe von `grid-auto-flow` zu verwenden, aber sie funktioniert nicht genau so, wie wir es vielleicht erwarten würden. Wir fügen nicht einfach das Schlüsselwort `row` oder `column` irgendwo in die Deklaration ein. Stattdessen müssen wir das Schlüsselwort `auto-flow` auf der richtigen Seite des Schrägstrichs verwenden.

Wenn es sich auf der linken Seite des Schrägstrichs befindet, setzt die Kurzschreibweise `grid-auto-flow` auf `row` und erstellt explizite Spalten.

grid: auto-flow / 200px 1fr;

/* shorthand for: */ 
/*
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
*/

Wenn es sich auf der rechten Seite des Schrägstrichs befindet, setzt die Kurzschreibweise `grid-auto-flow` auf `column` und erstellt explizite Zeilen.

grid: 100px 300px / auto-flow;

/* shorthand for: */ 
/*
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
*/

Wir können auch die Größe impliziter Tracks zusammen mit dem Schlüsselwort `auto-flow` festlegen, was entsprechend `grid-auto-rows` oder `grid-auto-columns` auf den angegebenen Wert setzt.

grid: 100px 300px / auto-flow 200px;

/* shorthand for: */ 
/*
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
*/

Siehe den Pen grid shorthand – explicit rows and implicit columns von Manuel Matuzovic (@matuzo) auf CodePen.

Feature Queries in Edge

Die Überprüfung der Unterstützung für CSS Grid funktioniert hervorragend mit Feature Queries, da alle Browser, die Grid unterstützen, auch Feature Queries verstehen. Das bedeutet, wir können prüfen, ob ein Browser die alte oder die neue Spezifikation oder beides unterstützt. Beides, fragen Sie? Ab Edge 16 unterstützt Edge nicht nur die neue Spezifikation, sondern auch die alte.

Wenn Sie also zwischen Versionen von Edge unterscheiden möchten, die die neue Spezifikation unterstützen, und denen, die dies nicht tun, müssen Sie Ihre Abfragen wie folgt schreiben:

/* Edge 16 and higher */
@supports (display: -ms-grid) and (display: grid) {
  div {
    width: auto;
  }
}

/* Edge 15 and lower */
@supports (display: -ms-grid) and (not (display: grid)) {
  div {
    margin: 0
  }
}

Hier ist eine praktische kleine Demo, die anzeigt, welche Feature Query im Browser, mit dem Sie sie öffnen, ausgelöst wird.

Siehe den Pen display: grid support test von Manuel Matuzovic (@matuzo) auf CodePen.

Nebenbei bemerkt, sollten Sie es nicht übertreiben mit (missbräuchlicher) Verwendung von Feature Queries für Browser-Sniffing, denn Browser-Erkennung ist schlecht.

Angabe der genauen Anzahl von Elementen pro Spalte

Grid eignet sich hervorragend für Seitenlayouts, kann aber auch auf Komponentenebene sehr nützlich sein. Eines meiner Lieblingsbeispiele ist die Möglichkeit, die genaue Anzahl von Elementen pro Spalte in einer Mehrspaltenkomponente anzugeben.

Nehmen wir an, wir haben eine Liste von 11 Elementen und möchten nach jedem vierten Element eine neue Spalte hinzufügen. Das Erste, was wir tun müssen, nachdem wir `display: grid` auf das übergeordnete Element angewendet haben, ist, die Funktionsweise des Grid-Auto-Platzierungs-Algorithmus zu ändern. Standardmäßig füllt er jede Zeile nacheinander und fügt bei Bedarf neue Zeilen hinzu. Wenn wir `grid-auto-flow` auf `column` setzen, füllt Grid stattdessen jede Spalte nacheinander aus, was wir wollen. Das Letzte, was wir tun müssen, ist, die Anzahl der Elemente pro Spalte anzugeben. Dies ist möglich, indem wir so viele explizite Zeilen definieren, wie mit der Eigenschaft `grid-template-rows` benötigt werden. Wir können die Höhe jeder Zeile explizit festlegen oder sie einfach so groß machen wie ihr Inhalt, indem wir das Schlüsselwort `auto` verwenden.

ul {
  display: grid;
  grid-template-rows: auto auto auto auto;

  /* or shorter and easier to read: */
  /* grid-template-rows: repeat(4, auto); */
  grid-auto-flow: column;
}

Wenn wir die Anzahl der Elemente pro Spalte auf 5 ändern müssen, fügen wir einfach eine weitere Spur zur Spurenliste hinzu oder verwenden die repeat-Notation und ändern einfach den ersten Parameter auf den gewünschten Wert ( `grid-template-rows: repeat(5, auto)`).

Siehe den Pen Limited number of items per column von Manuel Matuzovic (@matuzo) auf CodePen.

Sticky Footer mit CSS Grid

Es gibt viele Möglichkeiten, Sticky Footer in CSS zu erstellen. Einige davon sind hacky und kompliziert, aber mit Grid ist es ziemlich einfach.

Nehmen wir an, wir haben eine *klassische* Header-, Main-Content- und Footer-Seitenstruktur.

<body>
  <header>HEADER</header>
  <main>MAIN</main>
  <footer>FOOTER</footer>
</body>

Zuerst setzen wir die `height` von `html` und `body` auf mindestens `100%` des Viewports, um sicherzustellen, dass die Seite immer den vollen vertikalen Raum einnimmt. Dann wenden wir `grid-template-rows` an, um den `body` in drei Zeilen aufzuteilen. Die erste ( `header`) und die letzte ( `footer`) Zeile können jede gewünschte Größe haben. Wenn wir möchten, dass sie immer so groß wie ihr Inhalt sind, setzen wir einfach die Höhe auf `auto`. Die Zeile in der Mitte ( `main`) soll immer den Rest des Platzes ausfüllen. Wir müssen die Höhe nicht berechnen, denn wir können die Fraktionseinheit verwenden, um dies zu erreichen.

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Dadurch wächst der Hauptkörper und der Footer passt sich entsprechend an und bleibt am unteren Rand des Viewports.

Siehe den Pen CSS Grid Layout Sticky Footer von Manuel Matuzovic (@matuzo) auf CodePen.

Automatische Mindestgröße von Grid-Elementen

Kürzlich twitterte Florian, dass er sich fragte, warum das Abschneiden von einzeiligem Text innerhalb eines Grid-Elements so kompliziert sei. Sein Beispiel veranschaulicht perfekt eine interessante Tatsache über Grid-Elemente.

Die Ausgangssituation ist ein Dreispalten-Grid mit einem Absatz in jedem Grid-Element.

<div class="grid">
  <div class="item">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo ipsum exercitationem voluptate, autem veritatis enim soluta beatae odio accusamus molestiae, perspiciatis sunt maiores quam. Deserunt, aliquid inventore. Ullam, fugit dicta.
    </p>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

Jeder Absatz sollte nur einzeilig sein und am Ende der Zeile einen Ellipsenpunkt anzeigen, wenn der Absatz länger ist als sein übergeordnetes Element. Florian löste dies, indem er `white-space` auf `nowrap` setzte, was eine einzelne Zeile erzwingt, `overflow` ausblendet und `text-overflow` auf `ellipsis` setzt.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Dies hätte bei einem Blockelement perfekt funktioniert, aber in diesem Grid-Beispiel dehnen sich die Spalten auf die Breite des einzeiligen Absatzes aus

Siehe den Pen Automatic minimum size of grid items von Manuel Matuzovic (@matuzo) auf CodePen.

Im Großen und Ganzen geschieht dies, weil ein Grid-Element nicht kleiner sein kann als seine Kinder. Die Standard-`min-width` eines Grid-Elements (oder Flex-Elements) ist auf `auto` gesetzt, was gemäß der Spezifikation

…eine automatische Mindestgröße auf der angegebenen Achse für Grid-Elemente anwendet, deren Überlauf sichtbar ist und die mindestens eine Spur überspannen, deren Mindestspurgrößenfunktion auto ist.

Dies macht Grid- und Flex-Elemente flexibler, aber manchmal ist es nicht wünschenswert, dass der Inhalt die Breite seiner übergeordneten Elemente dehnen kann. Um dies zu vermeiden, können wir entweder die `overflow`-Eigenschaft des Grid-Elements auf etwas anderes als `visible` ändern oder die `min-width` auf `0` setzen.

Siehe den Pen Truncate Text in CSS Grid von Manuel Matuzovic (@matuzo) auf CodePen.

Lesen Sie mehr über die automatische Mindestgröße von Grid-Elementen in der Grid-Spezifikation.

Zusammenfassung

Hoffentlich helfen Ihnen diese jüngsten Erkenntnisse, sich mit Grid wohler zu fühlen, so wie sie mir geholfen haben. In dieser neuen Spezifikation stecken viele Details, aber sie wird mit mehr Gebrauch interessanter und verständlicher.