Super-Power-Grid-Komponenten mit CSS-Custom-Properties

Vor einiger Zeit schrieb ich einen gut aufgenommenen Artikel darüber, wie man CSS-Variablen mit CSS Grid kombiniert, um besser wartbare Layouts zu erstellen. Aber CSS Grid ist nicht nur für Seiten gedacht! Das ist ein verbreiteter Irrtum. Obwohl es sicherlich sehr nützlich für das Seitenlayout ist, greife ich genauso oft zum Grid, wenn es um Komponenten geht. In diesem Artikel werde ich die Verwendung von CSS Grid auf Komponentenebene behandeln.

Grid ist weder ein Ersatz für Flexbox noch umgekehrt. Tatsächlich gibt uns die Kombination beider noch mehr Leistung beim Erstellen von Komponenten.

Erstellen einer einfachen Komponente

In dieser Demo führe ich Sie durch die Erstellung einer Text- und Bildkomponente, etwas, das Sie wahrscheinlich häufig auf einer typischen Website erstellen müssen und das ich oft selbst erstellt habe.

So sollte unsere erste Komponente aussehen

Stellen wir uns vor, dass die Elemente, aus denen unsere Komponente besteht, sich am selben Grid wie andere Komponenten auf der Seite ausrichten müssen. Hier ist die gleiche Komponente mit überlagerten Grid-Spalten (Hintergrund ignoriert)

Sie sollten ein Grid aus 14 Spalten sehen – 12 zentrale Spalten mit fester Breite und zwei flexible Spalten, eine auf jeder Seite. (Diese dienen nur zur Veranschaulichung und sind im Browser nicht sichtbar.) Die Verwendung von display: grid auf einem Element ermöglicht es uns, die *direkten Kinder* dieses Elements im Grid-Container zu positionieren. Wir halten es einfach, daher hat unsere Komponente nur zwei Grid-Kinder – ein Bild und einen Textblock. Das Bild beginnt bei Linie 2 und erstreckt sich über sieben Spuren auf der Spaltenachse. Der Textblock beginnt bei Linie 9 und erstreckt sich über fünf Spalten.

Zuerst, und das ist wichtig, müssen wir mit semantischem Markup beginnen. Obwohl Grid uns die Macht gibt, seine Kinder in jedem gewünschten Layout zu platzieren, sollte das zugrunde liegende Markup für Barrierefreiheit und Browser, die Grid nicht unterstützen, einer logischen Reihenfolge folgen. Hier ist das Markup, das wir für unsere Grid-Komponente verwenden werden

<article class="grid">
  <figure class="grid__media">
    <img src="" alt="" width="800px" height="600px" />
  </figure>
  <div class="grid__text">
    <h3>Heading</h3>
    <p>Lorem ipsum...</p>
  </div>
</article>

Die Klassen .grid__media und .grid__text werden zur Positionierung der Kindelemente verwendet. Zuerst müssen wir unseren Grid-Container definieren. Wir können das folgende CSS verwenden, um unsere Grid-Spuren zu dimensionieren

.grid {
  display: grid;
  grid-template-columns: 
    minmax(20px, 1fr) repeat(12, minmax(0, 100px)) minmax(20px, 1fr);
  grid-column-gap: 20px;
}

Dies gibt uns das zuvor illustrierte Grid – 12 zentrale Spalten mit einer maximalen Breite von 100 Pixeln, eine flexible Spalte auf jeder Seite und einen Abstand von 20 Pixeln zwischen jeder Spalte. Wenn Sie neugierig auf die minmax() Funktion sind, habe ich einen Artikel darüber geschrieben, der erklärt, was hier mit unseren Grid-Spalten passiert.

In diesem Fall, da sich sowohl unser Bild als auch unser Textblock auf derselben Grid-Zeilenspur befinden (und ich möchte, dass die Spurgröße einfach den Standardwert auto verwendet, der die Zeile entsprechend dem Inhalt dimensioniert), muss ich hier meine Grid-Zeilengrößen nicht deklarieren. Die explizite Platzierung der Grid-Elemente in derselben Zeile erleichtert jedoch verschiedene Komponentenvarianten, zu denen wir gleich kommen werden.

Wenn Sie neu bei Grid sind und nach Möglichkeiten suchen, damit zu beginnen, empfehle ich Ihnen, gridbyexample.com zu besuchen. Machen Sie sich vorerst keine Sorgen um die grid-template-columns Deklaration – viele der Punkte in diesem Artikel können auch auf einfachere Grids angewendet werden.

Nun müssen wir unsere Grid-Elemente mit dem folgenden CSS platzieren. Grid bietet uns eine ganze Reihe von verschiedenen Möglichkeiten, Elemente zu platzieren. In diesem Fall verwende ich grid-column, was die Kurzform für grid-column-start / grid-column-end ist

.grid__media {
  grid-column: 2 / 9; /* Start on Column 2 and end at the start of Column 9 */
}

.grid__text {
  grid-column: 10 / 14; /* Start on Column 10 and end at the start of Column 14 */
}

.grid__media,
.grid__text {
  grid-row: 1; /* We want to keep our items on the same row */
}

Wenn es Ihnen schwerfällt, die Grid-Linien beim Programmieren zu visualisieren, ist das Zeichnen in ASCII in den CSS-Kommentaren eine praktische Möglichkeit.

Hier ist eine Demo unserer Komponente in Aktion – Sie können den Hintergrund ein- und ausschalten, um die Grid-Spalten anzuzeigen

Siehe den Pen Grid component with toggle-able background von Michelle Barker (@michellebarker) auf CodePen.

Komponentenvarianten

Das Erstellen unserer Komponente ist einfach genug, aber was, wenn wir viele Varianten derselben Komponente haben? Hier sind einige Beispiele für verschiedene Layouts, die wir verwenden möchten

Wie Sie sehen können, nehmen die Textblöcke und Bilder unterschiedliche Positionen im Grid ein, und die Bildblöcke erstrecken sich über eine unterschiedliche Anzahl von Spalten.

Persönlich habe ich zuvor an Komponenten gearbeitet, die bis zu neun Varianten hatten! Das Codieren von Grid für diese Art von Situationen kann schwierig zu verwalten sein, insbesondere wenn Sie Dinge wie Fallbacks und Responsivität berücksichtigen, da unsere Grid-Deklarationen schwer zu lesen und zu debuggen werden können. Lassen Sie uns Wege untersuchen, wie wir dies einfacher zu verwalten und zu pflegen machen können.

Konsistenz

Lassen Sie uns zunächst ermitteln, welche Eigenschaftswerte bei unseren Komponentenvarianten konsistent bleiben, damit wir so wenig Code wie möglich schreiben können. In diesem Fall sollte unser Textblock immer vier Spalten umfassen, während unser Bild größer oder kleiner sein kann und sich an eine beliebige Spalte anpassen kann.

Für unseren Textblock werde ich die span Deklaration verwenden – so kann ich sicherstellen, dass dieser Block eine konsistente Breite behält. Für unser Bild verwende ich weiterhin die Start- und Endlinie, da die Anzahl der Spalten, über die sich die Bilder erstrecken, je nach Komponentenvariante variiert, ebenso wie seine Position.

Benennung von Grid-Linien

Grid ermöglicht es Ihnen, Ihre Linien zu benennen und auf sie per Name sowie Nummer zu verweisen, was ich beim Platzieren von Elementen äußerst hilfreich finde. Sie möchten vielleicht nicht zu sehr mit dem Benennen von Linien übertreiben, da Ihre Grid-Deklaration schwer lesbar werden kann, aber das Benennen einiger häufig verwendeter Linien kann nützlich sein. In diesem Beispiel verwende ich die Namen wrapper-start und wrapper-end. Wenn ich Elemente an einer dieser Linien platziere, weiß ich, dass sie sich am zentralen Wrapper ausrichten.

.grid {
  display: grid;
  grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(12, minmax(0, 100px)) [wrapper-end] minmax(20px, 1fr) [end];
}

Das Präfixen von Grid-Liniennamen mit *-start und *-end hat den zusätzlichen Vorteil, dass wir Elemente nach Grid-Bereichen platzieren können. Durch Setzen von grid-column: wrapper auf ein Grid-Element wird es zwischen unseren wrapper-start und wrapper-end Linien platziert.

Verwendung von CSS-Variablen für die Platzierung

CSS-Variablen (auch benutzerdefinierte Eigenschaften genannt) ermöglichen es uns, wartbareren Code für unsere Komponenten zu schreiben. Sie ermöglichen es uns, Werte innerhalb unseres CSS festzulegen und wiederzuverwenden. Wenn Sie einen Präprozessor wie Sass oder Less verwenden, sind Sie wahrscheinlich mit der Verwendung von Variablen vertraut. CSS-Variablen unterscheiden sich aus mehreren wichtigen Gründen von Präprozessor-Variablen

• Sie sind dynamisch. Mit anderen Worten, nachdem sie festgelegt wurden, kann der Wert immer noch geändert werden. Sie können dieselbe Variable aktualisieren, um verschiedene Werte anzunehmen, z. B. innerhalb verschiedener Komponenten oder an verschiedenen Breakpoints.
• Sie können nicht in Selektornamen, Eigenschaftsnamen oder Media-Query-Deklarationen verwendet werden. Sie dürfen nur für Eigenschaftswerte verwendet werden (daher heißen sie benutzerdefinierte Eigenschaften).

CSS-Variablen werden wie folgt festgelegt und verwendet

.box {
  --color: orange; /* Defines the variable and default value */
  background-color: var(--color); /* Applies the variable as a property value */
}

Wir können die Tatsache nutzen, dass CSS-Variablen Standardwerte zulassen – so dass, wenn eine Variable nicht gefunden wird, ein Fallback-Wert verwendet wird.

Sie können einen Standardwert für eine Variable wie folgt festlegen

background-color: var(--color, red);

In diesem Fall setzen wir die Eigenschaft background-color auf den Wert von --color, aber wenn diese Variable nicht gefunden wird (z. B. noch nicht deklariert ist), ist der Hintergrund rot.

Im CSS-Code zur Platzierung unserer Grid-Elemente können wir eine Variable verwenden und einen Standardwert deklarieren, wie folgt

.grid__media {
  grid-column: var(--mediaStart, wrapper-start) / var(--mediaEnd, 9);
}

.grid__text {
  grid-column: var(--textStart, 10) / span 4;
}

Wir brauchen keine Variable für die span Deklaration des Textes, da diese für jede Komponentenvariante gleich sein wird.

Wenn es nun um unsere Komponentenvarianten geht, müssen wir nur die Variablen für die Elementpositionen definieren, wenn sie sich von der Originalversion unterscheiden

.grid--2 {
  --mediaEnd: end;
  --textStart: wrapper-start;
}

.grid--2,
.grid--4 {
  --mediaStart: 8;
}

.grid--3 {
  --mediaStart: start;
}

.grid--4 {
  --mediaEnd: wrapper-end;
  --textStart: 3;
}

Hier ist das Ergebnis

Siehe den Pen CSS Grid components with variables von Michelle Barker (@michellebarker) auf CodePen.

Zum Vergleich würde die Platzierung von Elementen auf die gleiche Weise ohne Verwendung von Variablen so aussehen

/* Grid 2 */
.grid--2 .grid__media {
  grid-column: 8 / end;
}

.grid--2 .grid__text {
  grid-column-start: wrapper-start;
}

/* Grid 3 */
.grid--3 .grid__media {
  grid-column-start: start;
}

/* Grid 4 */
.grid--4 .grid__media {
  grid-column: 8 / wrapper-end;
}

.grid--4 .grid__text {
  grid-column-start: 3;
}

Ein ziemlicher Unterschied, oder? Für mich ist die Version mit Variablen lesbarer und hilft mir auf einen Blick zu verstehen, wo die Elemente jeder Komponentenvariante positioniert sind.

Variablen innerhalb von Media Queries

CSS-Variablen ermöglichen es uns auch, die Position unserer Grid-Elemente bei unterschiedlichen Breakpoints einfach anzupassen, indem wir sie innerhalb von Media Queries deklarieren. Es ist denkbar, dass wir für Tablet-Bildschirme ein einfacheres Grid-Layout anzeigen und zu einem komplexeren Layout übergehen möchten, sobald wir Desktop-Größen erreichen. Mit dem folgenden Code können wir ein einfaches, abwechselndes Layout für kleinere Bildschirme anzeigen und die Variablen für das komplexere Layout dann in eine Media Query einschließen.

.grid__media {
  grid-column: var(--mediaStart, wrapper-start) / var(--mediaEnd, 8);
}

.grid__text {
  grid-column: var(--textStart, 8) / span var(--textSpan, 6);
}

.grid--2,
.grid--4 {
  --mediaStart: 8;
  --mediaEnd: 14;
  --textStart: wrapper-start;
}

/* Move to a more complex layout starting at 960px */
@media(min-width: 960px) {
  .grid {
    --mediaStart: wrapper-start;
    --mediaEnd: 9;
    --textStart: 10;
    --textSpan: 4;
  }
  
  .grid--2 {
    --mediaStart: 9;
    --mediaEnd: end;
    --textStart: wrapper-start;
  }
  
  .grid--2,
  .grid--4 {
    --mediaStart: 8;
  }

  .grid--3 {
    --mediaStart: start;
  }

  .grid--4 {
    --mediaEnd: wrapper-end;
    --textStart: 3;
  }
}

Hier ist die vollständige Demo in Aktion

Siehe den Pen CSS Grid components with variables and media queries von Michelle Barker (@michellebarker) auf CodePen.

Performance

Eine Sache, die man bei der Verwendung von CSS-Variablen beachten sollte, ist, dass das Ändern einer Variable für ein Element eine Neuberechnung der Stile für alle Kinder dieses Elements verursacht (hier ist ein ausgezeichneter Artikel, der die Leistung von Variablen im Detail behandelt). Wenn Ihre Komponente also viele Kinder hat, kann dies ein wichtiger Punkt sein, insbesondere wenn Sie die Variablen viele Male aktualisieren möchten.

Fazit

Es gibt viele verschiedene Möglichkeiten, Responsive Design mit CSS Grid zu handhaben, und dies ist sicherlich nicht der *einzige* Weg. Ich würde auch nicht empfehlen, Variablen für Ihren gesamten Grid-Code in jedem Teil Ihres Projekts zu verwenden – das könnte ziemlich verwirrend werden und wäre wahrscheinlich unnötig! Aber nachdem ich CSS Grid im letzten Jahr viel verwendet habe, kann ich bestätigen, dass diese Methode wirklich gut funktioniert, um Ihren Code wartbar zu halten, wenn Sie mit mehreren Komponentenvarianten arbeiten.