Erste Schritte mit CSS Grid

Warum ist CSS Grid ein großes Ding und warum sollten wir uns darum kümmern?

Nun, CSS Grid ist das erste echte Layout-System für das Web. Es wurde entwickelt, um Inhalte sowohl in Spalten als auch in Zeilen zu organisieren und gibt Entwicklern endlich fast gottähnliche Kontrolle über die Bildschirme vor uns. Das bedeutet, dass wir jahrzehntelange Hacks und Workarounds zum Platzieren von Elementen auf einer Webseite endlich aufgeben können – letztendlich bedeutet dies, dass komplexe Layouts und schön typografierte Seiten nun nicht nur möglich, sondern auch *einfach* und *wartbar* sind.

Mit CSS Grid wird das Web ein viel schönerer Ort werden, als wir es gewohnt sind.

Okay, aber wie funktioniert Grid? Es gibt viele komplexe Tutorials da draußen, die sich mit sehr vielen Details befassen, aber ich denke, wir sollten mit den absoluten Grundlagen beginnen. Was wir hier machen werden, ist ein relativ einfaches Typenmuster mit einer Reihe von Zeichen aus einem Alphabet, die auf einer Seite angeordnet sind.

Um loszulegen, fügen wir unser Markup hinzu

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
</div>

Zuerst stylen wir diese Buchstaben, um die richtige `font-size` und `color` zu verwenden, und zentrieren dann diese Buchstaben in den Divs mit Flexbox-Eigenschaften wie `align-items` und `justify-content`. Und ja, das stimmt! CSS Grid ersetzt Flexbox-Eigenschaften nicht, sondern ergänzt sie, was sie bereits tun. Wir können sogar viele dieser Eigenschaften in Verbindung mit CSS Grid verwenden. Aber vorerst kehren wir zur Demo zurück

Im obigen Beispiel haben wir zwei einfache Divs, die übereinander liegen, weil sie standardmäßig `display: block` haben. Als nächstes stellen wir unser Elternelement so ein, dass es das Grid-Layout verwendet

.wrapper {
  display: grid;
}

Was dann zu diesem Ergebnis führt

Siehe den Pen Type Specimen Grid Demo – 1 von Robin Rendle (@robinrendle) auf CodePen.

Jetzt stellen Sie vielleicht fest, dass nichts wirklich passiert ist. Und Sie hätten Recht! Im Gegensatz zum Setzen von `display: inline-block;` oder `display: inline;` ist nicht ganz klar, was passiert, wenn wir display auf `grid` setzen. Tatsächlich müssen wir unserem Grid zuerst eine bestimmte Anzahl von Spalten oder Zeilen zuweisen, damit es überhaupt *etwas* tut. In diesem Beispiel werden wir die Buchstaben einfach nebeneinander in zwei Spalten ausrichten

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

Lassen Sie uns diese neuen Codezeilen aufschlüsseln. Zuerst erstellen wir zwei Spalten für unser Grid mit `grid-template-columns`. Dieser Wert von `1fr` mag seltsam erscheinen, wenn Sie ihn noch nie zuvor gesehen haben, aber es ist eine gültige CSS-Einheit, die jeder Spalte sagt, dass sie einen Bruchteil unseres Grids ausmachen soll. In diesem Fall bedeutet dies, dass es zwei Spalten gleicher Breite geben wird.

Das wird dann etwa so aussehen

Siehe den Pen Type Specimen Grid Demo – 2 von Robin Rendle (@robinrendle) auf CodePen.

Juhu! Es funktioniert. Aber sehen Sie diese merkwürdige Lücke zwischen den beiden Spalten? Das ist der Hintergrund des `wrapper`, der durch jeden `letter`-Div schimmert, und das liegt daran, dass wir die Eigenschaft `grid-column-gap` auf 1px gesetzt haben. Normalerweise würden wir einen größeren `column-gap` wünschen, besonders wenn wir Textblöcke nebeneinander ausrichten. Aber in diesem Fall ist ein Pixel gut genug für uns.

Was passiert also, wenn wir zwei neue Buchstaben zu unserem Markup hinzufügen? Wie wird sich das auf das Layout auswirken?

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
  <div class='letter'>
    C
  </div>
  <div class='letter'>
    D
  </div>
</div>

Nun, technisch gesehen wird sich das Grid überhaupt nicht ändern – wir haben dem Grid bereits gesagt, dass es zwei Spalten haben soll, also werden diese beiden Letter-Divs direkt unter den anderen ihren Platz finden und genau `1fr` breit sein.

Siehe den Pen Type Specimen Grid Demo – 3 von Robin Rendle (@robinrendle) auf CodePen.

Nun kommt das Seltsame – warum gibt es keine 1-Pixel-Lücke zwischen den Buchstaben A und C sowie zwischen B und D? Nun, `grid-column-gap` ist nur für Spalten, und was wir hier effektiv getan haben, ist die Erstellung einer neuen *Zeile* in unserem Grid. Wir müssen `grid-row-gap` verwenden, damit diese Änderung wirksam wird

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}

Und so sieht das aus

Siehe den Pen Type Specimen Grid Demo – 4 von Robin Rendle (@robinrendle) auf CodePen.

Wir haben unser allererstes Grid erstellt. Wir haben eine Zeile und eine Spalte erstellt, und alles, was wir wirklich tun mussten, war, das Markup zu ändern. Aber lassen Sie uns unsere Spalten noch ein wenig genauer betrachten. Was würde passieren, wenn wir der `grid-template-columns`-Eigenschaft einen weiteren Wert hinzufügen? So

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

Nun, wir würden natürlich eine weitere Spalte erstellen! Und beachten Sie, wie wir den Hintergrund des `wrapper`-Elements jetzt deutlich sehen können, weil keine Kinder vorhanden sind, um diesen Platz zu füllen.

Siehe den Pen Type Specimen Grid Demo – 5 von Robin Rendle (@robinrendle) auf CodePen.

Und wenn wir den Wert eines `fr` in dieser Eigenschaft ändern, würden wir effektiv das erstellen, was als asymmetrisches Grid bekannt ist. Nehmen wir an, wir möchten, dass unsere erste Spalte in unserem Grid dreimal so viel Platz einnimmt wie die anderen beiden Spalten

.wrapper {
 grid-template-columns: 3fr 1fr 1fr;
}

Dies würde dazu führen, dass die Spalten mit *A* und *D* größer sind als die anderen beiden Spalten, genau wie wir es erwarten würden

Siehe den Pen Type Specimen Grid Demo – 6 von Robin Rendle (@robinrendle) auf CodePen.

Ist das nicht mächtig? Wir müssen uns nicht mehr um negative Margins oder den perfekten %-Wert einer Grid-Spalte kümmern, um Dinge richtig auszurichten. Wir können super komplexe Grids erstellen, ohne die Berechnungen durchführen zu müssen, die uns früher gezwungen waren. Jetzt müssen wir nur einen neuen Wert zur `grid-template-columns`-Eigenschaft hinzufügen und voilà, eine neue Grid-Spalte erscheint wie von Zauberhand!

Aber was ist mit responsiven Grids, könnten Sie fragen? Nun, das ist wirklich genauso einfach wie das Ändern dieser Eigenschaft innerhalb einer Media Query. Nehmen wir an, wir möchten 2 Spalten als unsere Standard-Gridgröße, dann bei 500 Pixeln möchten wir 3 Spalten und schließlich, auf größeren Bildschirmen, werden wir den gesamten Inhalt in 4 Spalten verschieben. Alles, was wir schreiben müssten, ist dies

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

@media screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Stellen Sie sicher, dass Sie diese Demo in einem neuen Tab öffnen und die Größe des Viewports ändern, um die responsive Magie zu sehen!

Die Eigenschaft `grid-template-columns` ist also viel komplizierter, als ich hier gezeigt habe, aber dies ist ein großartiger Ausgangspunkt. Als Nächstes sollten wir über die wirklich lebensverändernde Eigenschaft im CSS Grid-Standard lernen: `grid-template-rows`.

Okay, gehen wir blind hinein. Lassen Sie uns in dem kleinen Codeausschnitt unten und mit dem, was wir bisher über Grid gelernt haben, herausfinden, was diese neue Eigenschaft tun könnte

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

Anstatt die Breite von Spalten und ihre Beziehung zueinander festzulegen, legen wir nun die Höhe von Zeilen und ihre Beziehung fest. Wenn wir also zwei Zeilen wie in unserer vorherigen Demo haben und die letzte Einheit auf 3fr gesetzt ist, bedeutet dies, dass die zweite Zeile immer dreimal so hoch sein wird wie die erste.

Siehe den Pen Type Specimen Grid Demo – 8 von Robin Rendle (@robinrendle) auf CodePen.

Das mag ziemlich einfach aussehen, aber bisher konnten wir das noch nie wirklich tun. Wir mussten immer hässliche Hacks schreiben, wie das Setzen einer `min-height` auf ein bestimmtes Element oder das Ändern eines Klassennamens. Aber wir konnten noch nie *Beziehungen* zwischen Zeilen wie diese herstellen; das ist es, was CSS Grid so mächtig macht.

Mit diesem winzigen Wissensschatz und einer Handvoll neuer Eigenschaften können wir fabelhaft komplexe Layouts erstellen – asymmetrische und responsive Grids sind nur ein kleiner Teil davon. Und bisher war dies nur ein Einblick in den monströsen CSS Grid-Standard, da es noch viel zu behandeln gibt. Aber ich denke, Jen Simmons hat es am besten beschrieben, als sie über Grid schrieb

Wir müssen CSS Grid erkunden, bis wir verstehen, was es tun will, wozu es gezwungen werden kann und was es ablehnt. Viele Designer werden vielleicht nie lernen, CSS zu codieren, aber Sie müssen CSS gut genug verstehen, um unser künstlerisches Medium zu verstehen.

Und sicher, all der obige Code sieht zuerst sehr seltsam aus. Aber was es bedeutet ist, dass wir keine riesigen CSS-Frameworks verwenden müssen und auch eine ganze Reihe von Layout-Hacks jetzt völlig irrelevant sind. Aber was mich an Grid am meisten begeistert, ist, dass es uns zwingt, den Raum in einem Browser auf eine völlig neue Weise zu betrachten.

Wir werden nicht nur eine Reihe neuer Eigenschaften lernen müssen, sondern auch unsere bisherigen Erkenntnisse komplett überdenken müssen. CSS Grid ist also nicht nur ein Standard, sondern eine seltsame Philosophie an sich.

Finden wir es gemeinsam heraus!

Browser-Unterstützung

Weitere Informationen

• Jen Simmons und Rachel Andrew haben viele erstaunliche Tutorials und Anleitungen zu diesem Thema geschrieben
• Grid Inspector Tools in Firefox sind super praktisch
• Wir haben einen vollständigen Leitfaden für Grid, der auf jede Eigenschaft und jeden Wert detaillierter eingeht