CSS Grid richtig anwenden

Violet Peña hat ihre Empfehlungen für die Verwendung von CSS Grid geteilt. Im Wesentlichen lassen sie sich auf folgende übergeordnete Punkte reduzieren

1. Verwenden Sie Namen anstelle von Zahlen für die Einrichtung unserer Grid-Spalten.
2. fr sollte unsere flexible Einheit der Wahl sein.
3. Wir brauchen kein Grid-System mehr.

Obwohl das alles großartige Ratschläge sind und Violet einige Beispiele liefert, um ihre Empfehlungen zu untermauern, gefällt mir besonders, was sie über das Lernen von CSS Grid sagt

„CSS Grid zu lernen“ erfordert die Entwicklung von praxiserprobten Kenntnissen vieler neuer Eigenschaften, die nicht nur einen Aspekt des Erscheinungsbilds oder Verhaltens beschreiben, sondern in ein völlig neues Layoutsystem einfließen. Dieses System umfasst etwa 18 Eigenschaften, die Paradigmen und Syntax verwenden, die im CSS-Standard selten (oder nie) zuvor gesehen wurden.

Das bedeutet, dass CSS Grid eine ziemlich hohe Einstiegshürde hat – ein Entwickler muss viele neue Informationen lernen und verinnerlichen, um damit effektiv arbeiten zu können. Sobald Sie diese Einstiegshürde überwunden haben, ist Grid ein erstaunlicher Verbündeter bei der Erstellung von Layouts. Unterhalb dieser Einstiegshürde ist Grid eine Belastung. Man fragt sich, warum man sich die Mühe macht, es überhaupt zu verwenden, da es viel zusätzlichen Aufwand für wenig Ertrag zu erfordern scheint.

In diesem Beitrag möchte ich Ihnen helfen, diese Einstiegshürde zu überwinden, indem ich Ihnen die effektivsten Wege zeige, die Grid-Spezifikation zu nutzen.

Außerdem hat mich dieser Beitrag daran erinnert, dass ich dazu neige, meine Grid-Spaltennamen nicht zu benennen, obwohl ich nicht sicher bin, warum. Wie in diesem Code-Schnipsel, den Violet uns durchgeht

.container {
  display: grid;
  grid-template-columns: [sidebar] 3fr [content] 4fr;
}

Jetzt können wir die Namen sidebar oder content verwenden, wenn wir unsere grid-column wie folgt definieren

.content {
  grid-column: content;
}

Das gefällt mir wirklich gut! Es ist super einfach zu lesen und wenn wir die Größe unserer .content-Klasse ändern wollten, müsste man nur dorthin zurückkehren, wo das Grid ursprünglich definiert wurde. Jedenfalls werde ich von nun an meine Grid-Spalten benennen.

Direkter Link →