Kürzlich habe ich an einer modernen Implementierung einer Blog-Rolle gearbeitet (eine Liste externer nützlicher / interessanter Blogs). Die Idee war, den Lesern eine Auswahl der neuesten Beiträge in diesen Blogs zur Verfügung zu stellen, die in einem Magazin-Layout zusammengefasst sind, anstatt eine trockene Liste von Links in der Seitenleiste.Der einfachste Teil der Aufgabe besteht darin, eine Liste der Beiträge und ihrer Auszüge (Auszug - Einführungstext vor dem Schnitt) aus unseren bevorzugten RSS-Feeds abzurufen. Zu diesem Zweck haben wir das Feedzy lite WordPress-Plugin verwendet , mit dem mehrere Feeds nach Zeit sortiert in einer Liste zusammengefasst werden können - in unserem Fall die ideale Lösung. Der schwierige Teil ist, alles schön zu machen.Die Standard-Listenoberfläche des Plugins ist wahrscheinlich geschmacklos, daher wollte ich sie als Zeitungs- oder Zeitschriftenwebsite mit einer Mischung aus großen und kleinen „ausgewählten“ Blöcken gestalten.Klingt nach der perfekten Gelegenheit, CSS Grid zu nutzen! Erstellen Sie ein Rasterlayout für verschiedene Layouts, z. B. ein fünfspaltiges und ein dreispaltiges Layout, und wechseln Sie dann mithilfe von Medienabfragen auf verschiedenen Bildschirmgrößen zwischen diesen. Recht? Aber brauchen wir diese Medienabfragen und all diese Probleme beim Definieren von Kontrollpunkten wirklich, wenn Sie nur den Parameter Grid verwenden können auto-fit, der das adaptive Grid für uns erstellt?Diese Idee schien mir verlockend, aber als ich begann Elemente über mehrere Spalten des Rasters Hinzufügen ( Spannweiten) begann das Gitter auf schmalen Bildschirmen aus der Seite zu kriechen. Medienanfragen schienen die einzige Lösung zu sein. Aber ich habe etwas Besseres gefunden!Nachdem ich eine Reihe von Artikeln über CSS Grid studiert hatte, stellte ich fest, dass sie hauptsächlich in zwei Typen unterteilt sind:- So erstellen Sie ein interessantes Layout mit Bereichen, jedoch mit einer bestimmten Anzahl von Spalten.
- So erstellen Sie ein adaptives Layout in einem Raster, jedoch mit Spalten gleicher Breite (d. H. Ohne Bereiche).
Ich möchte, dass das Raster sowohl dies als auch das implementiert: ein vollständig adaptives Layout mit adaptiver Größenänderung mehrspaltiger Elemente.Das Schöne ist, dass es einfach ist, ein Magazinlayout mit Dutzenden von Codezeilen und einer Medienabfrage zu erstellen, sobald Sie die Einschränkungen von adaptiven Rastern verstehen und warum und wann Bereiche die Anpassungsfähigkeit aufheben (oder sogar ohne sie, wenn Sie die Vielfalt der Bereiche einschränken möchten).Hier ist ein klarer Vergleich des RSS-Plugins aus der Box und des Ergebnisses unserer Arbeit (anklickbar):Dies ist ein vollständig adaptives Magazinlayout mit farbigen „ausgewählten“ Blöcken, die sich je nach Anzahl der Spalten dynamisch an das Layout anpassen. Die Seite zeigt ungefähr 50 Beiträge an, aber der Layoutcode hängt nicht von der Anzahl der Elemente ab. Sie können die Anzahl der Beiträge in den Plugin-Einstellungen leicht auf 100 erhöhen, und das Layout bleibt ganz unten interessant.All dies wird ausschließlich durch CSS und die Verwendung von nur einer Medienabfrage erreicht, um Inhalte in einer Spalte auf den engsten Bildschirmen (weniger als 460 Pixel) anzuzeigen.Was am unglaublichsten ist, das gesamte Layout umfasste nur 21 Zeilen CSS (ohne Berücksichtigung der allgemeinen Stile der Website). Um diese Flexibilität mit so wenig Code zu erreichen, musste ich jedoch tief in die dunkelsten Tiefen des CSS-Rasters eintauchen und lernen, wie ich einige seiner Einschränkungen umgehen kann.Der Code, auf dem das gesamte Layout basiert, ist unglaublich kurz und alles dank der Pracht des CSS-Grids:.archive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
grid-gap: 32px;
grid-auto-flow: dense;
}
.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;
}
@media (max-width: 459px) {
.archive {
display: flex;
flex-direction: column;
}
}
Die in diesem Artikel beschriebene Technik kann sicher verwendet werden, um dynamisch generierte Inhalte zu stilisieren, unabhängig davon, ob es sich um die Ausgabe des Widgets der letzten Beiträge, Archivseiten oder Suchergebnisse handelt.Erstellen Sie ein adaptives Netz
Ich habe 17 Elemente erstellt, um die Vielfalt zukünftiger Inhalte zu demonstrieren - Überschriften, Bilder und Auszüge <div></div><div class="archive">
<article class="article">
</article>
</div>
Der Code zum Umwandeln dieser Elemente in ein adaptives Raster ist besonders kompakt:.archive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 1em;
}
→ Demo auf CodePenBeachten Sie, wie sich die Zeilenhöhe automatisch an den höchsten Inhaltsblock in der Zeile anpasst. Wenn Sie die Breite in der Demo über den obigen Link ändern, werden Sie feststellen, dass die Elemente automatisch vergrößert und verkleinert werden und sich die Anzahl der Spalten von 1 auf 5 ändert.Hier in Aktion sehen wir die CSS-Grid-Magie namensauto-fit. Dieses Schlüsselwort funktioniert in Verbindung mit der Funktion, auf dieminmax()angewendet wirdgrid-template-columns.Wie es funktioniert
Das fünfspaltige Layout selbst kann folgendermaßen erhalten werden:.archive {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Dadurch wird jedoch ein fünfspaltiges Layout erstellt, das sich bei unterschiedlichen Bildschirmbreiten erstreckt und zusammenzieht, jedoch immer fünfspaltig bleibt, was zu schrecklich schmalen Spalten auf kleinen Bildschirmen führt. Das erste, was mir in den Sinn kommt, ist, eine Reihe von Medienabfragen zu schreiben und ein Raster mit einer anderen Anzahl von Spalten neu zu definieren. Das würde funktionieren, aber das Schlüsselwort auto-fiterledigt alles automatisch.Um auto-fitdie Funktion nach Bedarf zu nutzen minmax(). Auf diese Weise teilen wir dem Browser mit, wie stark Sie die Spalten komprimieren und wie stark sie gedehnt werden können. Wenn eine der Grenzen erreicht ist, nimmt die Anzahl der Spalten zu bzw. ab..archive {
grid-template-columns: repeat (auto-fit, minmax(180px, 1fr));
}
In diesem Beispiel versucht der Browser, so viele Spalten mit einer Breite von bis zu 180 Pixel aufzunehmen. Wenn zu viel Platz vorhanden ist, werden alle Spalten erweitert und gleichmäßig auf sich aufgeteilt. Dies bestimmt die Bedeutung 1fr: Die Spaltengrößen müssen gleich Brüchen ( fr Aktionen) der verfügbaren Breite sein.Wenn Sie das Browserfenster strecken, werden alle Spalten mit zunehmendem freien Speicherplatz gleich groß. Sobald der neu gefundene Speicherplatz 180 Pixel erreicht, wird an seiner Stelle eine neue Spalte angezeigt. Und wenn Sie das Browserfenster verkleinern, geschieht alles umgekehrt und passt das Raster perfekt an, bis es zu einem einspaltigen Layout wird. Magie!→ VideodemoUnd all diese Anpassungsfähigkeit dank einer Codezeile. Na cool?Erstellen von Spannen mit "Autoflow: Dicht"
Im Moment haben wir also bereits ein adaptives Gitter, das sind nur alle seine Elemente - die gleiche Breite. Das Layout einer Zeitung oder Zeitschrift impliziert das Vorhandensein ausgewählter Blöcke, in diesem Zusammenhang solcher, die zwei, drei oder sogar alle verfügbaren Spalten abdecken würden.Um mehrspaltige Bereiche zu erstellen, können wir die Eigenschaft grid-column: spanin den Elementen verwenden, die mehr Platz belegen sollen. Angenommen, das dritte Listenelement soll zwei Spalten breit sein:.article:nth-child(3) {
grid-column: span 2;
}
Nach dem Hinzufügen von Bereichen können jedoch viele Probleme auftreten. Erstens können sich in den Fällen Löcher im Gitter bilden, wenn das breite Element nicht auf seine Linie passt und auto-fites auf Folgendes überträgt:Dies lässt sich leicht beheben, indem Sie grid-auto-flow: densedem Raster eine Eigenschaft hinzufügen . Aufgrund dieser Eigenschaft versteht der Browser, dass Löcher mit anderen Elementen gefüllt werden müssen. Dies erzeugt einen Fluss um die breiteren Elemente, die enger sind:Bitte beachten Sie: Die Reihenfolge der Elemente ist fehlerhaft, jetzt steht das vierte Element vor dem dritten. Soweit ich weiß, kann dies nicht umgangen werden. Dies ist eine der Einschränkungen von CSS Grid, die akzeptiert werden müssen.Möglichkeiten, Spannweiten zu identifizieren
Es gibt verschiedene Möglichkeiten, die Anzahl der Spalten anzugeben, die ein Element belegen soll. Es ist am einfachsten, grid-columns: span [n]auf eines der Elemente anzuwenden , wobei ndie Anzahl der Spalten angegeben wird, die das Element belegen wird. Für das dritte Element in unserem Layout ist eine Eigenschaft registriert grid-column: span 2, was erklärt, warum seine Breite doppelt so groß ist wie bei anderen Elementen.Um andere Methoden verwenden zu können, müssen Sie die Gitterlinien angeben . Die Gitterlinien sind wie folgt nummeriert:Gitterlinien können von links nach rechts mit positiven Zahlen (z. B. 1, 2, 3) oder von rechts nach links mit negativen Zahlen (-1, -2, -3) angezeigt werden. Sie können verwendet werden, um Elemente mithilfe einer Eigenschaft grid-columnwie folgt im Raster zu platzieren :.grid-item {
grid-column: ( ) / ( );
}
Die Gitterlinien erweitern also unsere Fähigkeit, Bereiche zu definieren. Flexibilität wird durch die Möglichkeit hinzugefügt, den Anfangs- oder Endwert durch ein Schlüsselwort zu ersetzen span. Zum Beispiel kann der dreispaltige blaue Block im obigen Beispiel erstellt werden, indem eine dieser Eigenschaften auf das achte Gitterelement angewendet wird:grid-column: 3 / 6grid-column: -4 / -1grid-column: 3 / span 3grid-column: -4 / span 3grid-column: span 3 / -1- usw.
In einem nicht adaptiven Gitter (d. H. Mit einer festen Anzahl von Spalten) ergibt jede dieser Eigenschaften das gleiche Ergebnis (wie im obigen Beispiel mit dem blauen Block). Wenn das Raster jedoch anpassungsfähig ist und sich die Anzahl der Spalten ändert, wird der Unterschied sehr deutlich. Einige Bereiche unterbrechen das Layout bei aktiviertem Auto-Wrap, sodass diese beiden Lösungen nicht kompatibel sind. Glücklicherweise können wir sie mit einigen Tricks sicher kombinieren.Aber zuerst müssen wir das Problem verstehen.Probleme mit dem horizontalen Bildlauf
Hier sind einige „vorgestellte Elemente“, die mit der Rasterlinienmethode erstellt wurden (anklickbar):Über die gesamte Breite (fünf Spalten) sieht alles gut aus. Wenn Sie jedoch den Bildschirm auf eine Größe reduzieren, bei der zwei Spalten vorhanden sein sollten, wird das Layout folgendermaßen unterbrochen:Wie Sie sehen, hat unser Raster seine Anpassungsfähigkeit verloren, und obwohl der Container geschrumpft ist, versucht das Raster, alle fünf Spalten zu unterstützen. Zu diesem Zweck versucht sie weiterhin, dieselbe Spaltenbreite zu verwenden, und geht schließlich über die Grenzen ihres Containers rechts hinaus. Daraus ergibt sich ein horizontaler Bildlauf.Warum passiert es? Das Problem ist, dass der Browser versucht, unsere genauen Anweisungen für die Gitterlinien einzuhalten. Bei dieser Breite sollte das auto-fitRaster nur zwei Spalten anzeigen, aber unser Nummerierungssystem für Stapelzeilen widerspricht dem und bezieht sich speziell auf die fünfte Zeile. Dieser Widerspruch führt zu Unordnung. Um unser implizites zweispaltiges Raster korrekt anzuzeigen, können nur die Zahlen 1, 2, 3 und -3, -2, -1 wie folgt verwendet werden:Wenn jedoch eines der Elemente unseres Rasters Anweisungen grid-columnaußerhalb dieser Grenzen enthält, z. B. 4, 5 oder -6, erhält der Browser mehrdeutige Anweisungen. Einerseits bitten wir Sie, automatisch flexible Spalten zu erstellen (die - implizit - bei dieser Bildschirmbreite zwei bleiben sollten). Andererseits haben wir explizit auf Gitterlinien verwiesen, die in einem zweispaltigen Format nicht existieren können. Wenn es einen Widerspruch zwischen impliziten (automatischen) Spalten und ihrer explizit definierten Anzahl gibt, bevorzugt das Raster immer eine explizite Definition . So erscheinen unerwünschte Spalten und horizontaler Überlauf (was sie als CSS-Datenverlust bezeichnen) Bereiche können wie Gitterliniennummern explizite Spaltendefinitionen erstellen. Gitterspalte: span 3 (das achte Gitterelement in der Demo) zwingt das Gitter, explizit mindestens drei Spalten zu haben, obwohl wir zwei implizite Spalten wollen.Es scheint, dass die einzige Möglichkeit darin besteht, Medienabfragen zu verwenden, um die Werte grid-columnin der gewünschten Breite zu ändern ... aber beeilen Sie sich nicht! Das dachte ich auch zuerst. Nach einigem Nachdenken und Herumspielen mit verschiedenen Einstellungen stellte ich jedoch fest, dass es einige Möglichkeiten gibt, dieses Problem zu umgehen, dank derer wir immer noch nur eine Medienanforderung für die engsten Geräte haben.Lösungen
Wie sich herausstellte, besteht der Trick darin, die Bereiche nur anhand von Zeilennummern zu bestimmen, die für das engste Raster der zur Anzeige geplanten Raster verfügbar sind. In diesem Fall handelt es sich um ein zweispaltiges Raster (wir verwenden eine Medienabfrage für die einspaltige Anzeige). Somit können Sie die Zahlen 1, 2, 3 und ihre negativen Paare sicher verwenden, ohne das Gitter zu brechen.Zuerst dachte ich, ich würde mich mit diesen Zahlenkombinationen auf die Breite der Spanne in zwei Spalten beschränken:grid column: span 2grid-column: 1 /3grid-column: -3 / -1
Welche bleiben bis zu zwei Lautsprechern perfekt anpassbar:Obwohl dies funktioniert , ist dies aus gestalterischer Sicht eine ernsthafte Einschränkung und nicht zu hell. Ich wollte Spannweiten in der Breite von drei, vier oder sogar fünf Spalten auf Breitbildschirmen erstellen. Aber wie? Mein erster Gedanke war, wieder zu Medienabfragen zurückzukehren (omg, es ist schwierig, alte Gewohnheiten loszuwerden), aber ich habe trotzdem versucht, diesen Ansatz zu vermeiden und das reaktionsschnelle Design aus einem anderen Blickwinkel zu betrachten.Beim erneuten Betrachten der Liste der verfügbaren Zahlen wurde mir plötzlich klar, dass positive und negative Zahlen in den Anfangs- und Endwerten grid-columnbeispielsweise kombiniert werden 1/-3können.2/-2. Es scheint nichts interessantes. Dies scheint jedoch nicht mehr der Fall zu sein, wenn Sie die Position der Linien nach dem Ändern der Rastergröße verstehen: Bereiche ändern die Breite entsprechend der Breite des Bildschirms. Eine ganze Reihe neuer Möglichkeiten für adaptive Bereiche eröffnet insbesondere Elemente, die eine andere Anzahl von Spalten mit einer Änderung der Bildschirmbreite umfassen, ohne dass Medienabfragen erforderlich sind.Das erste Beispiel, das ich entdeckt habe, ist grid-column: 1/-1. Diese Eigenschaft verwandelt das Element in ein Banner in voller Breite, das alle Spalten vom ersten bis zum letzten füllt, auch wenn nur eine Spalte vorhanden ist!Verwenden vongrid-column: 1/-2können Sie eine Spanne "fast in voller Breite" erstellen, die alle Spalten von links nach rechts mit Ausnahme der letzten ausfüllt. In einem zweispaltigen Layout wird eine solche Spanne adaptiv zu einem gewöhnlichen Element in einer Spalte. Überraschenderweise funktioniert es auch, wenn das Layout auf eine Spalte komprimiert wird. (Es scheint, dass der Grund dafür ist, dass das Raster das Element nicht auf die Breite Null reduziert und daher die Breite einer Spalte bleibt, wie im Fall von grid-column: 1/1.) Ich ging davon aus, dass es grid-column: 2/-1genauso funktionieren sollte, nur eine Spalte links und nicht rechts unberührt lassen sollte . Es stellte sich als fast richtig heraus, dass beim Komprimieren des Layouts auf eine Spalte immer noch ein Überlauf auftritt.Dann habe ich eine Kombination versucht1/-3. Es funktionierte gut auf Breitbildschirmen, die mindestens drei Spalten füllten, und auf schmalen, die nur eine füllten. Ich dachte, dass sich bei einem zweispaltigen Raster etwas Seltsames herausstellen würde, da die erste Zeile des Rasters mit der Zeile unter der Zahl identisch ist -3. Zu meiner Überraschung wird der Artikel in einer Spalte korrekt angezeigt.Nach zahlreichen Experimenten habe ich herausgefunden, dass es 11 geeignete Werte grid-columnvon denen gibt, die in einem zweispaltigen Raster verfügbar sind. Drei davon funktionieren sogar in einem einspaltigen Layout. Sieben andere funktionieren bis zu zwei Spalten korrekt, und für eine ordnungsgemäße Anzeige in einer Spalte benötigen sie nur eine Medienabfrage.Hier ist die vollständige Liste:Demonstration adaptiver Rasterspaltenwerte auf verschiedenen Bildschirmgrößen in einem Auto-Fit-Raster. ( Demo )Im Allgemeinen gibt es trotz einer relativ begrenzten Anzahl von adaptiven Bereichen viele Möglichkeiten.2/-2 - Eine interessante Kombination, die eine zentrierte Spanne erzeugt, die bis zum einspaltigen Raster reicht!3/-1 - am wenigsten nützlich, da dies selbst bei zwei Spalten zu einem Überlauf führt.3/-3 - eine angenehme Überraschung.
Aufgrund der Vielzahl von Werten grid-columnaus dieser Liste ist es möglich, ein interessantes und vollständig ansprechendes Layout zu erstellen. Mit einer einzelnen Medienabfrage für die engste einspaltige Anzeige können zehn verschiedene Muster verwaltet werden grid-column.Dieselbe Medienabfrage ist recht einfach, sagen wir mal unkompliziert. In unserem Beispiel ist er dafür verantwortlich, die Rasteranzeige auf Flexbox umzustellen:@media (max-width: 680px) {
.archive {
display: flex;
flex-direction: column;
}
.article {
margin-bottom: 2em;
}
}
Hier ist das endgültige Raster, das, wie Sie vielleicht bemerkt haben, vollständig reagiert - von einer bis fünf Spalten (anklickbar):Verwendung: nth-child () zum Wiederholen der dynamischen Breite
Um meinen Code auf zwei Dutzend Zeilen zu reduzieren, habe ich einen anderen Trick angewendet. Mit dem Selektor :nth-child(n)konnte ich eine große Anzahl von Elementen gleichzeitig formatieren. Meine ganze Idee mit Spannen war es, auf viele Beiträge im Feed angewendet zu werden, damit ausgewählte Blöcke regelmäßig auf der Seite erscheinen. Zuerst habe ich eine durch Kommas getrennte Liste von Selektoren mit einer klar definierten Elementnummer geschrieben:.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;
}
In der Geschwindigkeit wurde mir klar, dass dies ein sehr zeitaufwändiger Prozess ist, insbesondere wenn Sie die gesamte Liste der Bedingungen für jedes untergeordnete Element kopieren müssen, das innerhalb des Artikels geändert werden muss - Überschrift, Links usw. Während des Prototyping musste ich die Nummern in jeder dieser Listen jedes Mal manuell ändern, wenn ich mit der Position der Bereiche spielen wollte. Ein langweiliger und fehleranfälliger Prozess.Damals wurde mir klar, dass Sie die coole Funktion des Pseudo-Selektors nutzen können :nth-child: Geben Sie anstelle eines ganzzahligen Werts beispielsweise einen Ausdruck ein, :nth-child(2n+ 2)dh jedes zweite untergeordnete Element.Auf diese Weise habe ich :nth-child([])einen blauen Block in voller Breite in meinem Raster erstellt, der oben auf der Seite und dann in der Mitte der Liste angezeigt wird:.article:nth-child(31n + 1) {
grid-column: 1 / -1;
background: rgba(11, 111, 222, 0.5);
}
Ein Code in Klammern ( 31n + 1) ist für die Auswahl des 1., 32., 63. usw. verantwortlich. untergeordnetes Element. Der Browser startet die Schleife beginnend mit n = 0 ( 31 * 0 + 1 = 1), dann n=1( 31 * 1 + 1 = 32) und schließlich n=2( 31 * 2 + 1 = 63). Im letzteren Fall versteht der Browser, dass es kein 63. untergeordnetes Element gibt, ignoriert die Regel, stoppt den Zyklus und wendet die Regel auf das 1. und 32. Element an.Ich mache etwas Ähnliches für die lila Blöcke, die links oder rechts auf der Seite erscheinen:.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 linken lila Blöcke. Der Ausdruck 16n + 2ist dafür verantwortlich, Stile auf jedes 16. Rasterelement anzuwenden, beginnend mit dem zweiten.Der zweite Selektor ist für die rechten lila Blöcke. Das Intervall ist das gleiche ( 16n), aber die Verschiebung ist unterschiedlich ( 10). Infolgedessen befinden sich diese Blöcke regelmäßig auf der rechten Seite des Rasters in Elementen mit den Nummern 10, 26, 42 usw.Für die visuellen Stile dieser Elemente habe ich einen anderen Trick verwendet, um zu vermeiden, dass sich der Code wiederholt. Für gängige Stile von lila Blöcken (zum background-colorBeispiel für offensichtliche ) können Sie einen Selektor verwenden:.article:nth-child(8n + 2) {
background: rgba(128, 0, 64, 0.8);
}
Mit dieser Auswahl werden die Elemente 2, 10, 18, 26, 34, 42, 50 und mehr ausgewählt. Mit anderen Worten, er wählt sowohl den linken als auch den rechten Block aus.Dies funktioniert, weil 8n- dies genau die Hälfte 16nist und die Verschiebungsdifferenz zwischen den beiden Selektoren ebenfalls 8 beträgt.Letztes Wort
CSS Grid kann jetzt verwendet werden, um flexible, reaktionsschnelle Netze mit minimalem Code zu erstellen. Wenn Sie jedoch die Verwendung von retrograden Medienabfragen vermeiden, gibt es erhebliche Einschränkungen bei der Positionierung von Elementen im Raster.Es wäre sehr cool, Bereiche erstellen zu können, die nicht zu horizontalem Scrollen und Überlaufen auf kleinen Bildschirmen führen würden. Jetzt können wir dem Browser sagen: "Erstellen Sie bitte ein adaptives Raster", und das macht es sehr gut. Sie müssen jedoch nur hinzufügen: „Oh, und dieses Element des Rasters ist bitte in vier Spalten unterteilt.“ Er bewegt den Griff zu schmalen Bildschirmen, wobei er die Anforderung einer Spannweite von vier Spalten anstelle eines adaptiven Rasters bevorzugt. Es wäre möglich, das Raster dazu zu bringen, das Gegenteil zu tun, zum Beispiel so:.article {
grid-column: span 3, autofit;
}
Ein weiteres Problem bei reaktionsschnellen Gittern ist die letzte Zeile. Das Ändern der Bildschirmbreite kann häufig dazu führen, dass sie leer ist. Ich habe lange versucht, einen Weg zu finden, um das letzte Element des Gitters auf die verbleibenden Spalten auszudehnen (bzw. die Zeile zu füllen), aber es scheint unmöglich zu sein. Zumindest für jetzt. Es wäre schön, die Gelegenheit zu bekommen, die Anfangsposition des Elements mit einem Schlüsselwort festzulegen, wie autosozusagen "Füllen Sie die Zeile bis zum Ende, beginnend am linken Rand". Irgendwie so:.article {
grid-column: auto, -1;
}
... das würde die Spanne am linken Rand des Gitters bis zum Ende der Linie verlängern.