Einfache benannte Rasterbereiche

Ich betrachte benannte Rasterbereiche in CSS Grids als eine Art „Bring Your Own Syntactic Sugar“. Man braucht sie nicht unbedingt (man könnte die Rasterplatzierung auf andere Weise ausdrücken), aber sie kann diese Platzierung intuitiver machen. Und, hey, wenn ich mich da irre, korrigiert mich bitte in den Kommentaren.

Nehmen wir an, Sie richten ein 3-Spalten-Raster ein

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 
     200px  1fr  1fr;
}

Keine Zeilen definiert dort; diese sind implizit und erscheinen bei Bedarf. Wir könnten sie definieren, tun es aber nicht, denn wie in den meisten Situationen im Webdesign ist uns egal, wie hoch die Elemente sind – die Höhe wächst bei Bedarf, um den Inhalt unterzubringen.

Nun, wie platzieren wir etwas an der obersten linken Position im Raster? Wir könnten dem Raster sagen, dass es es so dort platzieren soll

.item {
  grid-column: 1 / 2; /* start at the first grid column line and end at the second */
}

Das funktioniert, obwohl die Klasse .item das erste Kind von .grid sein sollte. Andernfalls könnte etwas anderes implizit dort platziert werden und .item rutscht in die nächste freie Zeile. Wenn wir ganz sicher sein wollten, es oben links zu platzieren, könnten wir auch die Zeile definieren

.item {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

Jetzt ist es sicher oben links, selbst wenn andere Elemente dort explizit platziert sind (sie überlappen sich einfach). Wir können die Dinge sogar mit der Eigenschaft grid-area kürzer gestalten

.item {
  grid-area: 1 / 1 / 2 / 2;
}

All diese 1er und 2er mögen für den Moment intuitiv genug sein, aber die Zahlen werden in komplexeren Rastern, die sowohl Spalten- als auch Zeilenplatzierung beinhalten, etwas viel.

Schauen Sie sich das an. Während wir die Spalten definieren, können wir sie mit einer separaten Eigenschaft benennen

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 
     200px  1fr  1fr;
  grid-template-areas:
    "pro    a    b"
    "pro    c    d";
}

Jede Anführungszeichen-Gruppe in grid-template-areas ist eine Zeile. Darin sind Namen, die ich mir gerade ausgedacht habe. Es könnte fast alles sein, solange es für Sie Sinn ergibt. Sehen Sie, wie das Wort „pro“ dort auf zwei Zeilen zweimal wiederholt wird? Das ist wichtig, denn es bedeutet, dass wir ein Rasterelement dort platzieren könnten, wo dieser Wert „pro“ steht, und es wäre in der ersten von drei Spalten und würde sich über zwei Zeilen erstrecken. Ziemlich intuitiv, oder?

Wir platzieren es so

.pro-features {
  /* rather than */
  grid-area: 1 / 1 / 2 / 3;
  /* we can now do */
  grid-area: pro;
}

Hier ist dieses einfache Beispiel

Sehen Sie den Pen Einfache benannte Rasterbereiche von Chris Coyier (@chriscoyier) auf CodePen.

Möchten Sie ein Raster noch beschreibender gestalten? Versuchen Sie, es in Ihren CSS-Kommentaren in ASCII zu zeichnen.