Responsives Magazin-Layout mit CSS-Grid in nur 20 Zeilen

Ich habe kürzlich an einer modernen Variante des Blogrolls gearbeitet. Die Idee war, den Lesern eine Auswahl der neuesten Beiträge dieser Blogs in einem Magazin-Layout anzubieten, anstatt nur eine Liste unserer Lieblingsblogs in der Seitenleiste anzuzeigen.

Der einfache Teil war das Sammeln einer Liste von Beiträgen mit Auszügen aus unseren bevorzugten RSS-Feeds. Dafür haben wir ein WordPress-Plugin, Feedzy lite, verwendet, das mehrere Feeds zu einer einzigen, zeitlich geordneten Liste aggregieren kann – perfekt, um deren neueste Angebote zu präsentieren. Der schwierige Teil war, das Ganze toll aussehen zu lassen.

Die Standard-Listen-UI des Plugins ist eher schlicht, daher wollte ich sie so gestalten, dass sie wie eine Zeitungs- oder Magazin-Website mit einer Mischung aus kleineren und größeren „Featured Content“-Bereichen aussieht.

Das scheint ein idealer Fall für CSS Grid zu sein! Ein Grid-Layout für unterschiedliche Layouts erstellen, sagen wir, ein Fünf-Spalten-Layout und ein Drei-Spalten-Layout, und dann Media Queries verwenden, um zwischen ihnen an verschiedenen Breakpoints zu wechseln. Richtig? Aber brauchen wir diese Media Queries – und den ganzen Aufwand, Breakpoints zu identifizieren – wirklich, wenn wir die auto-fit Optionen von Grid nutzen können, um automatisch ein flüssiges, responsives Grid für uns zu erstellen? 

Der Ansatz klang verlockend, aber als ich begann, spaltenübergreifende Elemente einzuführen, stieß ich auf Probleme mit dem Überlaufen des Grids auf schmalen Bildschirmen. Media Queries schienen die einzige Lösung zu sein. Das war so, bis ich einen Workaround fand!

Nachdem ich mir mehrere Tutorials zu CSS Grid angesehen hatte, stellte ich fest, dass sie größtenteils in zwei Lager fallen:

1. Tutorials, die zeigen, wie man ein interessantes Layout mit überlappenden Elementen erstellt, aber für eine feste Anzahl von Spalten.
2. Tutorials, die erklären, wie man ein responsives Grid erstellt, das sich automatisch anpasst, aber mit allen Grid-Items gleicher Breite (d.h. ohne überlappende Spalten).

Ich möchte, dass das Grid beides kann: ein voll responsives, flüssiges Layout erstellen, das auch responsiv angepasste Multi-Spalten-Elemente enthält.

Das Schöne ist, dass man, sobald man die Einschränkungen responsiver Grids versteht und warum und wann Spaltenübergänge die Grid-Responsivität beeinträchtigen, ein responsives Magazin-/Nachrichten-Layout in nur einem Dutzend Codezeilen plus einer einfachen Media Query definieren kann (oder sogar ganz ohne Media Queries, wenn man bereit ist, seine Spaltenübergangsoptionen einzuschränken).

Hier ist eine visuelle Darstellung des RSS-Plugins direkt nach der Installation und wie es aussehen wird, nachdem wir es gestylt haben. 

Dieses Magazin-Style-Grid-Layout ist vollständig responsiv, wobei sich die farbigen Featured-Bereiche dynamisch anpassen, wenn sich die Spaltenanzahl ändert. Die Seite zeigt etwa 50 Beiträge, aber der Layout-Code ist unabhängig von der Anzahl der angezeigten Elemente. Erhöhen Sie das Plugin auf 100 Elemente, und das Layout bleibt durchweg interessant.

All dies wird nur mit CSS und nur mit einer einzigen Media Query erreicht, um die Ein-Spalten-Anzeige auf den schmalsten Bildschirmen (d.h. kleiner als 460px) zu behandeln.

Unglaublicherweise hat dieses Layout nur 21 Zeilen CSS (ohne globale Content-Styling) gekostet. Um jedoch eine solche Flexibilität in so wenigen Codezeilen zu erreichen, musste ich tief in die obskureren Teile von CSS Grid eintauchen und lernen, wie man einige seiner inhärenten Einschränkungen umgeht.

Die wesentlichen Elemente des Codes, die dieses Layout erzeugen, sind unglaublich kurz und ein Beweis für die Genialität von CSS Grid.

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 32px;
  grid-auto-flow: dense;
}

/* Extra-wide grid-posts */
.article:nth-child(31n + 1) {
  grid-column: 1 / -1;
}
.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
}
.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
}

/* Single column display for phones */
@media (max-width: 459px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
}

Die Techniken in diesem Artikel könnten genauso gut verwendet werden, um dynamisch generierte Inhalte wie die Ausgabe eines Widgets mit den neuesten Beiträgen, Archivseiten oder Suchergebnissen zu stylen.

Erstellen eines responsiven Grids

Ich habe siebzehn Elemente mit einer Vielzahl von Mock-Inhalten – Schlagzeilen, Bilder und Auszüge – eingerichtet, die alle in einem Wrapper enthalten sind.

<div class="archive">
  <article class="article">
    <!-- content -->
  </article>
  
  <!-- 16 more articles -->
  
</div>

Der Code, der diese Elemente in ein responsives Grid verwandelt, ist bemerkenswert kompakt.

.archive {
  /* Define the element as a grid container */
  display: grid;
  /* Auto-fit as many items on a row as possible without going under 180px */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /* A little spacing between articles */
  grid-gap: 1em;
}

Beachten Sie, wie sich die Höhen der Zeilen automatisch anpassen, um den höchsten Inhalt in der Zeile aufzunehmen. Wenn Sie die Breite des Pens ändern, sehen Sie, wie die Elemente flüssig wachsen und schrumpfen und die Anzahl der Spalten von einer zu fünf wird, bzw. umgekehrt.

Die hier am Werk befindliche CSS Grid-Magie ist das Schlüsselwort auto-fit, das Hand in Hand mit der minmax()-Funktion arbeitet, die auf grid-template-columns angewendet wird.

Wie es funktioniert

Wir hätten das Fünf-Spalten-Layout allein damit erreichen können:

.archive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

Dies würde jedoch fünf Spalten erstellen, die mit unterschiedlichen Bildschirmbreiten wachsen und schrumpfen, aber immer bei fünf Spalten bleiben, was dazu führt, dass sie auf kleinen Bildschirmen lächerlich schmal werden. Der erste Gedanke könnte sein, eine Menge Media Queries zu erstellen und das Grid mit unterschiedlichen Spaltenzahlen neu zu definieren. Das würde gut funktionieren, aber mit dem auto-fit-Schlüsselwort wird alles automatisch erledigt.

Damit auto-fit wie gewünscht funktioniert, müssen wir die minmax()-Funktion verwenden. Diese teilt dem Browser mit, wie klein die Spalten zusammengequetscht werden können, gefolgt von der maximalen Breite, auf die sie sich ausdehnen können. Kleiner und die Anzahl der Spalten wird automatisch reduziert. Größer und die Anzahl der Spalten erhöht sich.

.archive {
  grid-template-columns: repeat (auto-fit, minmax(180px, 1fr));
}

In diesem Beispiel passt der Browser so viele Spalten wie möglich hinein, die 180px breit sind. Wenn noch Platz übrig ist, dehnen sich die Spalten gleichmäßig aus, indem sie den verbleibenden Platz untereinander aufteilen –  das besagt der Wert 1fr: die Spalten sind gleiche Bruchteile der verfügbaren Breite. 

Ziehen Sie das Fenster auf, und wenn der verfügbare Platz zunimmt, wachsen die Spalten gleichmäßig, um zusätzlichen Platz zu nutzen. Die Spalten wachsen weiter, bis der verfügbare Platz eine zusätzliche 180px-Spalte zulässt, an diesem Punkt erscheint eine völlig neue Spalte. Verringern Sie die Bildschirmbreite, und der Vorgang kehrt sich um, wodurch das Grid perfekt bis zu einem Ein-Spalten-Layout angepasst wird. Magie!

Und das alles an Responsivität erhalten Sie mit nur einer Codezeile. Wie cool ist das denn? 

Spaltenübergänge mit „autoflow: dense“ erstellen

Bisher haben wir ein responsives Grid, aber alle Elemente haben die gleiche Breite. Für ein Nachrichten- oder Magazin-Layout benötigen wir einige Inhalte, die durch das Überspannen von zwei oder mehr Spalten hervorgehoben werden, oder vielleicht sogar durch das Überspannen aller Spalten.

Um Multi-Spalten-Übergänge zu erstellen, können wir die Spaltenübergangsfunktion zu den Grid-Elementen hinzufügen, die mehr Platz einnehmen sollen. Wenn wir zum Beispiel möchten, dass das dritte Element in unserer Liste zwei Spalten breit ist, können wir hinzufügen:

.article:nth-child(3) {
  grid-column: span 2;
}

Sobald wir jedoch Spaltenübergänge hinzufügen, können eine Reihe von Problemen auftreten. Erstens können Lücken im Grid entstehen, da ein breites Element möglicherweise nicht in die Zeile passt, sodass Grid auto-fit es auf die nächste Zeile schiebt und dort eine Lücke hinterlässt, wo es gewesen wäre.

Die einfache Lösung ist, grid-auto-flow: dense zum Grid-Element hinzuzufügen, das dem Browser sagt, dass er alle Lücken mit anderen Elementen füllen soll, wodurch der schmalere Inhalt effektiv um die breiteren Elemente fließt, wie hier:

Beachten Sie, dass die Elemente nun nicht mehr in der ursprünglichen Reihenfolge sind, wobei das vierte Element vor dem dritten Element steht, das doppelt so breit ist. Soweit ich weiß, gibt es keinen Weg daran vorbei, und das ist eine der Einschränkungen, die man bei CSS Grid akzeptieren muss.

Schauen Sie sich Geoff Grahams „The Auto-Flowing Powers of Grid’s Dense Keyword“ an, um eine Einführung in grid-auto-flow: dense mit Beispielen, wie es sich verhält, zu erhalten.

Möglichkeiten, Spaltenübergänge anzugeben

Es gibt verschiedene Möglichkeiten, anzugeben, wie viele Spalten ein Element überspannen soll. Am einfachsten ist es, grid-columns: span [n] zu einem der Elemente hinzuzufügen, wobei n die Anzahl der Spalten ist, die das Element überspannen wird. Das dritte Element in unserem Layout hat grid-column: span 2, was erklärt, warum es doppelt so breit ist wie andere Elemente, die nur eine einzige Spalte überspannen.

Andere Methoden erfordern, dass Sie explizit Gridlinien definieren. Das Nummerierungssystem für Gridlinien ist wie folgt:

Gridlinien können von links nach rechts mit positiven Werten (z. B. 1, 2, 3) oder von rechts nach links mit negativen Werten (z. B. -1, -2, -3) angegeben werden. Diese können verwendet werden, um Elemente im Grid mithilfe der Eigenschaft grid-column wie folgt zu platzieren:

.grid-item {
  grid-column: (start track) / (end track);
}

Dies gibt uns also zusätzliche Möglichkeiten, ein überlappendes Element anzugeben. Dies ist besonders flexibel, da entweder der Start- oder der Endwert durch das Span-Schlüsselwort ersetzt werden kann. Zum Beispiel könnte der dreispaltige blaue Kasten im obigen Beispiel erstellt werden, indem Sie dem achten Grid-Element eines der folgenden hinzufügen:

• grid-column: 3 / 6
• grid-column: -4 / -1
• grid-column: 3 / span 3
• grid-column: -4 / span 3
• grid-column: span 3 / -1
• Etc.

In einem nicht-responsiven (d.h. fixen Spalten) Grid erzeugen all diese den gleichen Effekt (wie der blaue Kasten oben), aber wenn das Grid responsiv ist und sich die Anzahl der Spalten ändert, werden ihre Unterschiede sichtbar. Bestimmte Spaltenübergänge brechen das  Layout mit einem automatisch fließenden Grid, wodurch die beiden Techniken inkompatibel erscheinen. Glücklicherweise gibt es einige Lösungen, die es uns ermöglichen, die beiden erfolgreich zu kombinieren. 

Zuerst müssen wir jedoch das Problem verstehen.

Überlauf-Seiten-Scrolling-Probleme

Hier sind einige Featured-Bereiche, die mit der obigen Notation erstellt wurden:

Alles sieht bei voller Breite (fünf Spalten) gut aus, aber wenn es auf zwei Spalten reduziert wird, bricht das Layout wie folgt zusammen:

 Wie Sie sehen können, hat unser Grid seine Responsivität verloren und obwohl sich der Container verkleinert hat, versucht das Grid, alle fünf Spalten beizubehalten. Um dies zu erreichen, hat es aufgegeben, gleichmäßige Spaltenbreiten beizubehalten, und das Grid bricht aus der rechten Seite seines Containers aus, was zu horizontalem Scrollen führt.

Warum ist das so? Das Problem entsteht, weil der Browser versucht, die explizit benannten Gridlinien zu berücksichtigen. Bei dieser Breite sollte das auto-fit-Grid implizit zwei Spalten anzeigen, aber unser Gridlinien-Nummerierungssystem widerspricht dem, indem es explizit auf die fünfte Gridlinie verweist. Dieser Widerspruch führt zum Durcheinander. Um unser implizites Zwei-Spalten-Grid korrekt anzuzeigen, sind nur die Liniennummern 1, 2 und 3 sowie -3, -2, -1 erlaubt, wie folgt:

Aber wenn eines unserer Grid-Elemente grid-column-Referenzen enthält, die außerhalb dieses Bereichs liegen, wie z. B. die Gridlinien-Nummer 4, 5 oder 6 (oder -4, -5 oder -6), erhält der Browser widersprüchliche Anweisungen. Einerseits haben wir ihn gebeten, automatisch flexible Spalten zu erstellen (was uns bei dieser Bildschirmbreite implizit zwei Spalten geben sollte), aber wir haben auch explizit auf Gridlinien verwiesen, die in einem Zwei-Spalten-Grid nicht vorkommen. Wenn ein Konflikt zwischen impliziten (automatischen) Spalten und einer expliziten Anzahl von Spalten besteht, ordnet Grid immer dem expliziten Grid den Vorrang ein; daher die unerwünschten Spalten und der horizontale Überlauf (der auch treffend als CSS-Datenverlust bezeichnet wurde). Genau wie bei der Verwendung von Gridliniennummern können Spaltenübergänge auch explizite Spalten erstellen. Also zwingt grid-column: span 3 (das achte Grid-Element im Demo) das Grid, explizit mindestens drei Spalten zu übernehmen, während wir möchten, dass es implizit zwei anzeigt.

An diesem Punkt mag es so aussehen, als wäre der einzige Weg nach vorne, Media Queries zu verwenden, um die grid-column-Werte bei der Breite zu ändern, bei der unser Layout zusammenbricht – aber nicht so schnell! Das habe ich anfangs angenommen. Aber nachdem ich darüber nachgedacht und verschiedene Optionen ausprobiert hatte, fand ich, dass es eine begrenzte Anzahl von Workarounds gibt, die bis zu zwei Spalten funktionieren und nur eine Media Query für die Ein-Spalten-Anzeige auf den schmalsten Bildschirmen übrig lassen.

Die Lösungen

Der Trick, erkannte ich, ist, Spaltenübergänge nur mit Gridlinien anzugeben, die im schmalsten beabsichtigten Grid erscheinen. Das ist in diesem Fall ein Zwei-Spalten-Grid. (Wir verwenden eine Media Query, um das Ein-Spalten-Szenario für sehr schmale Bildschirme abzudecken.) Das bedeutet, wir können gefahrlos Gridlinien 1, 2 und 3 (oder -3, -2 und -1) verwenden, ohne das Grid zu unterbrechen.

Ich dachte ursprünglich, das würde bedeuten, dass ich mich auf einen maximalen Spaltenübergang von zwei Spalten beschränken muss, unter Verwendung von Kombinationen der folgenden:

• grid column: span 2
• grid-column: 1 /3
• grid-column: -3 / -1

Was bis zu zwei Spalten perfekt responsiv bleibt.

Obwohl dies funktioniert, ist es aus Designperspektive ziemlich einschränkend und nicht besonders aufregend. Ich wollte in der Lage sein, Spaltenübergänge zu erstellen, die auf großen Bildschirmen drei, vier oder sogar fünf Spalten breit sind. Aber wie? Mein erster Gedanke war, dass ich auf Media Queries zurückgreifen müsste (OMG, alte Gewohnheiten sterben schwer!), aber ich wollte von diesem Ansatz weg und anders über responsives Design nachdenken.

Als ich mir noch einmal anschaute, was wir mit nur 1 bis 3 und -3 bis -1 machen können, erkannte ich allmählich, dass ich positive und negative Liniennummern für die Start- und Endwerte von grid-column mischen konnte, wie z. B. 1/-3 und 2/-2. Auf den ersten Blick scheint das nicht sehr interessant zu sein. Das ändert sich, wenn man erkennt, wo sich diese Linien befinden, wenn man das Grid verkleinert: Diese Spaltenelemente ändern ihre Breite mit der Bildschirmgröße. Dies eröffnete eine ganz neue Reihe von Möglichkeiten für responsive Spaltenübergänge: Elemente, die unterschiedliche Anzahlen von Spalten überspannen, wenn der Bildschirm breiter wird, ohne Media Queries zu benötigen.

Das erste Beispiel, das ich entdeckte, ist grid-column: 1/-1. Dies lässt das Element wie ein Vollbild-Banner wirken, das von der ersten bis zur letzten Spalte bei allen Spaltennummern überspannt. Es funktioniert sogar bis zu einer Spalte Breite!

Durch die Verwendung von grid-column: 1/-2 konnte ein linksbündiger, fast vollbreiter Spalt erstellt werden, der rechts davon immer ein einspaltiges Element übrig ließ. Wenn es auf zwei Spalten reduziert wird, schrumpft es responsiv zu einer einzelnen Spalte. Überraschenderweise funktioniert es sogar, wenn es auf ein Ein-Spalten-Layout reduziert wird. (Der Grund scheint zu sein, dass Grid ein Element nicht auf Null Breite reduziert, sodass es eine Spalte breit bleibt, genau wie grid-column: 1/1.) Ich ging davon aus, dass grid-column: 2/-1 ähnlich funktionieren würde, aber rechtsbündig ausgerichtet, und größtenteils tut es das auch, außer bei Ein-Spalten-Anzeige, wo es zu Überlauf führt.

Als Nächstes probierte ich 1/-3 aus, was auf breiteren Bildschirmen gut funktionierte und mindestens drei Spalten anzeigte, und auf kleineren Bildschirmen eine Spalte. Ich dachte, es würde bei einem Zwei-Spalten-Grid etwas Seltsames tun, da die erste Gridlinie dieselbe ist wie die Gridlinie bei -3. Zu meiner Überraschung wird es immer noch fehlerfrei als einspaltiges Element angezeigt. 

Nach viel Herumprobieren kam ich auf elf mögliche grid-column-Werte, die Gridlinien aus dem Zwei-Spalten-Grid verwenden. Überraschenderweise funktionieren drei davon bis hin zu Ein-Spalten-Layouts. Sieben weitere funktionieren bis zu zwei Spalten und benötigen nur eine einzige Media Query, um die Ein-Spalten-Anzeige zu behandeln.

Hier ist die vollständige Liste:

Wie Sie sehen können, gibt es zwar eine begrenzte Auswahl an allen möglichen responsiven Spaltenübergängen, aber tatsächlich gibt es viele Möglichkeiten.

• 2/-2 ist interessant, da es einen zentrierten Spalt erzeugt, der bis zu einer Spalte funktioniert! 
• 3/-1 ist  am wenigsten nützlich, da er selbst bei zwei Spalten zu Überlauf führt.
• 3/-3 war eine Überraschung.

Durch die Verwendung einer Vielzahl von grid-column-Werten aus dieser Liste ist es möglich, ein interessantes und voll responsives Layout zu erstellen. Mit einer einzigen Media Query für die schmalste Ein-Spalten-Anzeige haben wir zehn verschiedene grid-column-Spaltenübergangsmuster zur Auswahl.  

Die Ein-Spalten-Media-Query ist im Allgemeinen ebenfalls unkompliziert. Diejenige in dieser finalen Demo greift auf kleineren Bildschirmen auf Flexbox zurück.

@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }

  .article {
    margin-bottom: 2em;
  }
}

Hier ist das finale Grid, das, wie Sie sehen können, von einer bis zu fünf Spalten voll responsiv ist.

Verwendung von :nth-child(), um variable Längenanzeigen zu wiederholen

Der letzte Trick, den ich verwendet habe, um meinen Code auf zwei Dutzend Zeilen zu reduzieren, war der Selektor :nth-child(n), den ich verwendet habe, um mehrere Elemente in meinem Grid zu stylen. Ich wollte, dass meine Spaltenübergangsstile auf mehrere Elemente in meinem Feed angewendet werden, damit die Featured-Post-Boxen regelmäßig auf der gesamten Seite erscheinen. Zuerst verwendete ich eine durch Kommas getrennte Selektorliste, wie hier:

.article:nth-child(2),
.article:nth-child(18),
.article:nth-child(34),
.article:nth-child(50)  {
  background-color: rgba(128,0,64,0.8);
  grid-column: -3 / -1;
}

Aber ich fand das bald umständlich, besonders da ich diese Liste für jedes Kindelement wiederholen musste, das ich innerhalb jedes Artikels stylen wollte – wie den Titel, Links usw. Während des Prototypings, wenn ich mit der Position meiner überlappenden Elemente spielen wollte, musste ich die Zahlen in jeder dieser Listen manuell ändern, was mühsam und fehleranfällig war.

Da erkannte ich, dass ich eine leistungsstarke Funktion des Pseudo-Selectors :nth-child anstelle einer einfachen Ganzzahl, wie ich sie in der obigen Liste verwendet habe, verwenden konnte. :nth-child(n) kann auch eine Gleichung annehmen, wie z. B. :nth-child(2n+ 2), die jedes zweite Kindelement auswählt.

Hier ist, wie ich :nth-child([formel]) verwendet habe, um die blauen Vollbild-Panels in meinem Grid zu erstellen, die ganz oben auf der Seite erscheinen und etwa auf halber Höhe wiederholt werden:

.article:nth-child(31n + 1) {
  grid-column: 1 / -1;
  background: rgba(11, 111, 222, 0.5);
}

Der Teil in den Klammern (31n + 1) stellt sicher, dass das 1., 32., 63. usw. Kind ausgewählt wird. Der Browser führt eine Schleife aus, beginnend mit n=0 (in diesem Fall 31 * 0 + 1 = 1), dann n=1 (31 * 1 + 1 = 32), dann n=2 (31 * 2 + 1 = 63). Im letzten Fall erkennt der Browser, dass es kein 63. Kindelement gibt, also ignoriert er es, stoppt die Schleife und wendet die CSS auf das 1. und 32. Kind an.

Ich mache etwas Ähnliches für die lila Boxen, die von rechts nach links abwechseln:

.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
  background: rgba(128, 0, 64, 0.8);
}

.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
  background: rgba(128, 0, 64, 0.8);
}

Der erste Selektor ist für die lila Boxen auf der rechten Seite. Die 16n + 2 sorgt dafür, dass die Stilistik auf jedes 16. Grid-Element angewendet wird, beginnend mit dem zweiten Element.

Der zweite Selektor zielt auf die Boxen auf der rechten Seite. Er verwendet denselben Abstand (16n), aber mit einem anderen Offset (10). Infolgedessen erscheinen diese Boxen regelmäßig auf der rechten Seite für die Grid-Elemente 10, 26, 42 usw.

Wenn es um die visuelle Gestaltung dieser Grid-Elemente und ihrer Inhalte geht, habe ich einen weiteren Trick verwendet, um Wiederholungen zu reduzieren. Für Stile, die beide Boxen gemeinsam haben (wie z.B. die background-color), kann ein einzelner Selektor verwendet werden, um beide auszuwählen:

.article:nth-child(8n + 2) {
  background: rgba(128, 0, 64, 0.8);
  /* Other shared syling */
}

Dies wählt die Elemente 2, 10, 18, 26, 34, 42, 50 usw. aus. Mit anderen Worten, es wählt sowohl die linken als auch die rechten Featured-Boxen aus.

Es funktioniert, weil 8n genau die Hälfte von 16n ist und weil die Offsets, die in den beiden separaten Selektoren verwendet werden, eine Differenz von 8 haben (d.h. die Differenz zwischen +10 und +2 ist 8).

Abschließende Gedanken

Derzeit kann CSS Grid verwendet werden, um flexible responsive Grids mit minimalem Code zu erstellen, aber dies geht mit einigen erheblichen Einschränkungen bei der Positionierung von Elementen einher, ohne den Rückschritt der Verwendung von Media Queries.

Es wäre großartig, Spaltenübergänge angeben zu können, die auf kleineren Bildschirmen keinen Überlauf erzwingen. Im Moment sagen wir dem Browser im Wesentlichen: „Bitte erstellen Sie ein responsives Grid“, was es wunderbar tut. Aber wenn wir dann sagen: „Oh, und machen Sie, dass dieses Grid-Element vier Spalten überspannt“, stößt es auf schmalen Bildschirmen auf Widerstand und priorisiert die Anforderung der Vier-Spalten-Überspannung gegenüber dem responsiven Grid. Es wäre großartig, Grid anweisen zu können, die Responsivität gegenüber unserer Spaltenanforderung zu priorisieren. Etwas wie das:

.article {
  grid-column: span 3, autofit;
}

Ein weiteres Problem bei responsiven Grids ist die letzte Zeile. Wenn sich die Bildschirmbreite ändert, ist die letzte Zeile oft nicht gefüllt. Ich habe lange nach einer Möglichkeit gesucht, das letzte Grid-Element so zu überbrücken (und somit zu füllen), dass es die verbleibenden Spalten ausfüllt, aber es scheint, dass man das derzeit in Grid nicht tun kann. Es wäre schön, wenn wir die Startposition des Elements mit einem Schlüsselwort wie auto angeben könnten, was bedeutet: „Bitte lassen Sie die linke Kante dort, wo sie ist.“ So:

.article {
  grid-column: auto, -1;
}

…was bedeuten würde, dass die linke Kante bis zum Ende der Zeile reicht.