4 CSS Grid-Eigenschaften (und ein Wert) für die meisten Ihrer Layoutanforderungen

CSS Grid bietet uns ein leistungsfähiges Layoutsystem für Websites. Der CSS-Tricks-Leitfaden gibt Ihnen einen umfassenden Überblick über die Eigenschaften von Grid mit Layoutbeispielen. Was wir hier tun werden, ist ein umgekehrter Ansatz, um Ihnen die kleinstmögliche Menge an Grid-Eigenschaften zu zeigen, die Sie kennen müssen, um die meisten Ihrer Layoutanforderungen zu erfüllen.

Diese fünf Eigenschaften bringen Sie auf den Weg

• display (für den Wert grid)
• grid-template-columns
• grid-gap
• grid-auto-flow
• grid-column / grid-row

So einfach ist das. Nehmen wir an, Sie möchten das folgende Layout für kleine, mittlere und große Bildschirme implementieren.

Das ist der Markup, mit dem wir arbeiten werden

<!-- Stuff before -->

<nav class="container-nav">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

<div class="container-main">
  <section class="item item-type-a"></section>
  <section class="item item-type-b"></section>
  <section class="item item-type-b"></section>
  <section class="item container-inner">
    <section class="item-inner"></section>
    <section class="item-inner"></section>
    <section class="item-inner"></section>
    <section class="item-inner"></section>
    <section class="item-inner"></section>
  </section>
</div>

<!-- Stuff after -->

Wenn wir einige grundlegende Stile anwenden, erhalten wir Folgendes, was für kleine Bildschirme bereits ausreichend ist

Jetzt können wir zu den Grid-Eigenschaften übergehen!

Verwenden Sie display: grid, um die Seite in unabhängige Layout-Container zu unterteilen

Zuerst müssen wir festlegen, welche Teile der Seite mit Grid-Layouts ausgerichtet werden sollen. Es ist möglich, ein einziges Grid-Layout für die gesamte Seite zu definieren. Für Websites mit einer sehr komplexen Struktur (z. B. Nachrichtenwebsites) wird die Verwaltung eines großen Grids jedoch schnell kompliziert. In diesem Fall empfehle ich, die Dinge in mehrere, unabhängige Grid-Container aufzuteilen.

So wie das

Wo ziehen Sie die Grenze zwischen dem, was ein Grid ist und was nicht? Hier ist eine persönliche Faustregel, der ich folge

Wenn das Layout in einem bestimmten Teil der Seite nicht in das Raster eines angrenzenden oder umgebenden Teils der Seite passt, machen Sie diesen Teil zu seinem eigenen Grid-Container.

Ich habe die Gridlinien in den Seitenabschnitt mit der Klasse .container-main im folgenden Bild eingezeichnet. Möglicherweise stellen Sie fest, dass der Abschnitt mit der Klasse .container-inner aus dem Markup nicht genau in das Raster der Zeilen passt.

Hier ist ein weiteres mögliches Layout, bei dem die kleinen Abschnitte in das umgebende Raster passen, wenn ein feineres Raster gewählt wird. Ein separater Grid-Container ist hier nicht unbedingt erforderlich.

Um zu beginnen, wandeln wir .container-main in einen Grid-Container um. Dies ist der grundlegende Baustein für CSS Grid – die Umwandlung eines Elements in einen Grid-Container mit der Eigenschaft display

.container-main {
  display: grid;         
}

Dasselbe werden wir mit unseren anderen Grid-Containern tun

.container-inner {
  display: grid;         
}

.container-nav {
  display: grid;         
}

Verwenden Sie grid-template-columns, um die erforderlichen Spalten zu definieren

Als Nächstes definieren wir die Anzahl der Spalten, die wir in jedem Grid-Container benötigen, und wie breit diese Spalten sein sollen. Meine Richtlinie für die Anzahl der Spalten:  Verwenden Sie das kleinste gemeinsame Vielfache der maximalen Anzahl von Spalten, die für die verschiedenen Bildschirmgrößen benötigt werden.

Wie funktioniert das? Das Element .container-main hat auf mittelgroßen Bildschirmen insgesamt zwei Spalten. Wenn wir das mit der Anzahl der Spalten auf großen Bildschirmen (drei) multiplizieren, erhalten wir insgesamt sechs Spalten.

Dasselbe können wir auch für unsere Navigation, das Element .container-inner tun. Es gibt drei Spalten auf mittelgroßen Bildschirmen, die wir mit einer Spalte auf großen Bildschirmen multiplizieren, um insgesamt drei Spalten zu erhalten.

Das Element .container-nav liefert keine Spaltenanzahl. In diesem Fall sollte das Grid-System die Anzahl der Spalten automatisch an die Anzahl der Menüelemente anpassen. Es ist üblich, Elemente in einer Navigation hinzuzufügen oder zu entfernen, und es wäre gut, wenn sie entsprechend reagieren würden, was Grid uns etwas später helfen kann.

OK, wir haben also die Anzahl der Spalten für jeden Grid-Container definiert. Verwenden wir die Eigenschaft grid-template-columns, um diese festzulegen. Aber zuerst ein paar kleine Details

• Die Eigenschaft grid-template-columns wird nur auf dem Grid-Container verwendet. Mit anderen Worten, Sie werden sie nicht (zumindest nicht korrekt) auf einem Grid-Item innerhalb des Containers finden.
• Die Eigenschaft akzeptiert eine Reihe verschiedener Werte, die sowohl die Anzahl der Spalten als auch deren Breite definieren. Diejenige, die uns hier interessiert, ist die fraktionale (fr) Einheit. Ich empfehle dringend, sich Robins Übersicht anzusehen, da sie einzigartig für Grid ist und erstaunliche Berechnungen durchführt, um zu entscheiden, wie Grid-Elemente in einen Grid-Container passen.

Wir brauchen sechs gleich breite Spalten in .container-main. Das können wir so schreiben

.container-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

Oder wir können uns auf die Funktion repeat() verlassen, um es in etwas Lesbareres zu vereinfachen

.container-main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

Nehmen wir dieses Wissen und wenden es auch auf unser Element .container-inner an, das unserer Entscheidung nach drei Spalten benötigt.

.container-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Verwenden Sie grid-gap, um Abstände zwischen Grid-Items hinzuzufügen

Standardmäßig nutzt Grid den gesamten verfügbaren Platz in einem Grid-Container, um Grid-Items unterzubringen. Wenn Elemente direkt nebeneinander liegen, kann dies eine Designanforderung sein, aber nicht für das spezifische Layout, das wir erstellen. Wir wollen etwas Spielraum zwischen den Dingen!

Dafür haben wir die Eigenschaft grid-gap. Auch dies ist eine Eigenschaft, die nur für Grid-Container gilt und vertikale und horizontale Abstände zwischen Grid-Items erzeugt. Sie ist tatsächlich eine Kurzschreibweise, die die vertikalen Abstandskräfte von grid-row-gap und die horizontalen Abstandskräfte von grid-column-gap kombiniert. Es ist praktisch, dass wir die Dinge so aufteilen können, aber in Zeiten wie diesen, in denen wir in jeder Richtung den gleichen Abstand verwenden, ist die Kurzschreibweise grid-gap viel angenehmer zu schreiben.

Wir wollen 20px Abstand zwischen den Grid-Items in .container-main, 10px Abstand in .container-inner und 5px Abstand in .container-nav. Kein Problem! Alles, was es braucht, ist eine Einzeiler für jeden Grid-Container.

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

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

.container-nav {
  display: grid;
  grid-gap: 5px;
}

Verwenden Sie grid-column und grid-row, um die Größe der einzelnen Grid-Items zu bestimmen

Jetzt ist es an der Zeit, das Layout in die gewünschte Form zu bringen!

Zuerst die Eigenschaft grid-column, die es uns ermöglicht, ein Grid-Item über n Spalten zu erweitern, wobei n die Anzahl der zu überspannenden Spalten ist. Wenn Sie denken, dass dies stark an das Attribut rowspan erinnert, das uns in HTML-Tabellen ermöglicht, Zellen über mehrere Zeilen zu erweitern, liegen Sie nicht falsch.

So sieht es aus, wenn wir es auf ein Grid-.item in unserem Element .container-main und auf die .inner-item-Elemente in .container-inner anwenden

.item {
  grid-column: span 6;
}

.item-inner {
  grid-column: span 3;
}

Wir sagen hier, dass jedes Item sechs Zeilen in unserem Hauptcontainer und drei Zeilen in unserem inneren Container überspannt – was der Gesamtzahl der Spalten in jedem Container entspricht.

Ein interessanter Aspekt von CSS Grid ist, dass wir die Linien des Grids benennen können. Sie haben standardmäßig implizite Namen, aber sie zu benennen ist ein mächtiger Weg, um zwischen den Start- und Endlinien jeder Spalte auf der Bahn zu unterscheiden.

Wir können die Anzahl der Spalten und Zeilen, die die Items überspannen sollen, bei verschiedenen Breakpoints ändern

@media screen and (min-width: 600px) {
  .item-type-b {
    grid-column: span 3;
  }

  .item-inner {
    grid-column: span 1;
  }
}

@media screen and (min-width: 900px) {
  .item {
    grid-column: span 2;
    grid-row: span 2;
  }

  .item-type-b{
    grid-row: span 1;
  }

  .item-inner{
    grid-column: span 3;
  }
}

Verwenden von grid-auto-flow, um die Platzierung der Elemente zu steuern

CSS Grid platziert Elemente Zeile für Zeile. Deshalb sieht das Ergebnis in unserem Beispiel im Moment so aus

Eine spaltenweise Platzierung kann durch Setzen der Eigenschaft grid-auto-flow auf column (row ist der Standardwert) erreicht werden. Unser Layout profitiert in zwei Fällen von einer spaltenweisen Platzierung. Erstens erscheinen unsere Menüelemente endlich in einer horizontalen Ausrichtung. Zweitens werden die Elemente der Containerklasse in die gewünschte Gruppierung gebracht.

Das Endergebnis

Fazit: Mehr oder weniger Spezifikation?

Das Grid-System ermöglicht es uns nach dem Motto „So viele Spezifikationen wie nötig, aber so wenige wie möglich“ zu arbeiten. Wir haben nur einige wenige der notwendigen Spezifikationen behandelt, um Elemente in einen CSS-Grid-Container und die darin befindlichen Elemente zu Grid-Items zu verwandeln, nur um zu zeigen, wie wenig man wissen muss, um selbst komplexe Layouts mit CSS Grid zu erstellen.

CSS Grid unterstützt zusätzliche Anwendungsfälle, bei denen

• Wir wollen noch weniger Spezifikationen machen, um stattdessen stärker auf automatische Positionierung zu setzen.
• Wir wollen noch mehr Spezifikationen machen, um mehr Details des resultierenden Layouts zu bestimmen.

Wenn der erste Fall zutrifft, lohnt es sich, die folgenden zusätzlichen Grid-Optionen zu berücksichtigen

• Bei der Erstellung des Grids mit grid-template-columns können Sie das Grid-System die Breite einzelner Spalten automatisch mit dem Schlüsselwort auto bestimmen lassen oder sie mit den Einstellungen min-content, max-content oder fit-content an den vorhandenen Inhalt anpassen.
• Sie können das Grid-System die Anzahl der benötigten Spalten mithilfe von repeat, auto-fill, auto-fit und minmax automatisch bestimmen lassen. Selbst Media-Queries können überflüssig werden und diese Werkzeuge helfen, Dinge flexibel zu gestalten, ohne weitere Media-Queries hinzuzufügen.

Hier sind ein paar Artikel zu diesem Thema, die ich empfehle: Becoming a CSS Grid Ninja! und Auto-Sizing Columns in CSS Grid: auto-fill vs. auto-fit.

Wenn der zweite Fall zutrifft, bietet CSS Grid noch mehr Einstellungsmöglichkeiten für Sie

• Sie können die Breite der Spalten in der von Ihnen gewählten Einheit (z. B. px oder %) mit der Eigenschaft grid-template-columns explizit angeben. Darüber hinaus steht die Eigenschaft grid-template-rows zur Verfügung, um die Anzahl und Breite von Zeilen zu definieren, falls eine bestimmte Anzahl davon vorhanden ist.
• Sie können auch spezifische Spalten- oder Zeilennummern für die Positionierung als Werte für grid-column und grid-row (oder die Eigenschaften grid-column-start, grid-column-end, grid-row-start oder grid-row-end) verwenden.

Und wir haben noch nicht einmal die Ausrichtung von CSS Grid behandelt! Dennoch zeigt die Tatsache, dass wir so viel erreichen können, ohne dieses Thema überhaupt zu berühren, wie leistungsfähig CSS Grid ist.