In diesem Artikel werden wir alle Möglichkeiten der CSS Grid Repect () -Funktion untersuchen, mit denen wir Muster von Gitterspalten und Zeilen effizient erstellen und sogar reaktionsschnelle Layouts ohne Medienfragen erstellen können.
Die Eigenschaften der Gitter-Template-Säulen und Grid-Template-Reihen ermöglichen es uns, die Anzahl der gewünschten Zeilen und Spalten in einem Raster explizit festzulegen und anzugeben, wie sie angrenzt werden sollen. Dies kann sich wiederholt, wenn wir möchten, dass mehrere Zeilen und/oder Spalten auf die gleiche Weise dimensioniert werden.
Die Funktion repep () kann uns vor der Wiederholung speichern. Zum Beispiel könnten wir Folgendes schreiben:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Stattdessen können wir Folgendes schreiben:
<span>grid-template-columns: repeat(5, 1fr); </span>
im obigen Beispiel ermöglicht uns mit der Funktion prepe (), wie viele Spalten wir wollen (5) und welche Größe sie alle haben sollten (1FR - oder ein Bruchteil des verfügbaren Raums).
Dies macht unseren Code effizienter und einfacher zu lesen. Und dies ist nur ein einfaches Beispiel. Wie wir unten sehen werden, können wir viel mehr mit der Funktion repep () ausmachen.
Der folgende Stift zeigt eine einfache Demo des obigen Codes. Ein Artikel mit zehn Divs ist in fünf Spalten organisiert.
Siehe den Stift CSS Grid Repeat (): 5 einfache Spalten von SitePoint (@sinepoint) auf Codepen.
Die obige Demo verwendet die CSS -Gap -Eigenschaft. Um mehr über das Grid -Layout zu erfahren, lesen Sie unseren Anfänger -Leitfaden zu CSS Grid.
Wir können in den Klammern von Repeat () ziemlich viel in den Klammern tun. Es braucht zwei Argumente, die durch ein Komma getrennt sind. Der erste repräsentiert die "Count", und das zweite repräsentiert die "Tracks": Wiederholung (
Das Zählargument kann eines von drei Dingen sein:
Eindeutig legt ein Zahlenwert eine bestimmte Anzahl von Tracks fest. Auto-Fit und Auto-Fill ermöglichen jedoch je nach verfügbarem Raum unterschiedliche Anzahl von Tracks. Dies macht sie für reaktionsschnelle Layouts ohne Medienanfragen sehr praktisch. Wir werden sie unten ausführlich untersuchen.
Das Argument der Spuren gibt die Tracks an, die wiederholt werden. Dies sind die Optionen für dieses Argument:
Wie Sie sehen, gibt es viele mögliche Optionen für dieses Argument und sie können etwas verwirrend aussehen, insbesondere wenn einige von ihnen kombiniert werden. Wir werden versuchen, die Dinge hier ziemlich einfach zu halten, damit wir uns nicht im Unkraut verlieren. In den meisten Fällen ist das Argument der Spuren ziemlich einfach und intuitiv.
Bevor wir die verschiedenen Argumente untersuchen, die mit Repect () verwendet werden können, ist es erwähnenswert, dass Repeat () verwendet werden kann, um Muster von Spalten zu erstellen.
Betrachten Sie beispielsweise diesen „Longhand“ -code für ein sechsspaltiges Netz:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Wir können dies so umschreiben, wie dies mit repuola ():
<span>grid-template-columns: repeat(5, 1fr); </span>
Dies fordert den Browser an, ein Muster dreimal zu wiederholen - einer spalten Spalte 1FR, gefolgt von einer Spalte 2FR breit. Die folgende Demo zeigt dies in Aktion.
Siehe den Stift CSS Grid Repeat (): Säulenmuster von SitePoint (@sinepoint) auf Codepen.
Wir haben bereits einen Längenwert von 1FR gesehen, der mit Repeat () verwendet wurde. Der Vorteil der FR -Einheit besteht darin, dass sie nach dem verfügbaren Platz nach den Grüßen entspricht, ohne dass wir uns Sorgen machen müssen, wie viel Platz verfügbar ist. Wir können aber auch andere Längeneinheiten verwenden, in denen wir sie brauchen.
setzen wir beispielsweise drei Spaltenspuren ein und geben Sie ihnen eine Breite von 120 Pixel:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Die folgende Codepen -Demo zeigt das Ergebnis.
Siehe den Stift CSS Grid Repeat (): Längenwerte von SitePoint (@sinepoint) auf Codepen.
Die Spalten haben jetzt eine feste Breite, die sich nicht ändert, selbst wenn der Behälter zu eng ist. Versuchen Sie, mit der Browserbreite im oberen Stift herumzuspielen. Versuchen Sie auch, Pixel gegen andere Längeneinheiten wie 5EM, 10Ch, 15%usw. auszutauschen, um ihren Effekt zu sehen.
Das Keyword von Mincontent setzt einen Track so breit oder groß wie der minimale Inhalt. In der folgenden Demo haben wir drei Spalten, von denen jede auf Min-In-In-In-Konzent gesetzt ist, sodass jede Spalte so breit ist wie das längste Wort, das sie enthält:
<span>grid-template-columns: repeat(5, 1fr); </span>
Siehe den Stift CSS Grid Repect (): Min-In-In-In-In-In-In-Konzent von SitePoint (@sinepoint) auf Codepen.
Das Keyword von Max-In-Inhalts-Schlüsselwort basiert im Grunde genommen das Gegenteil von Mincontent: Es basiert die Spurgröße auf der größten Menge an Inhalten in einer Gitterzelle. In der folgenden Demo basieren die Spaltenbreiten auf der Zelle mit dem größten Inhalt:
<span>article {
</span> <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>Siehe den Stift CSS Grid Repeat (): Max-Inhalt von SitePoint (@sinepoint) auf Codepen.
Bei der Verwendung mit repep () ist das automatische Schlüsselwort maxes bei Max-in-in-Inhalt und Mins bei Min-In-In-In-In-In-In-Konzert.
Betrachten Sie das folgende Muster von Spalten:
<span>article {
</span> <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>Hier haben wir sechs Spalten, die jeweils ungerade einen auf eine Breite des Auto-Autos einstellen. In der folgenden Codepen-Demo können wir sehen, dass die Divs mit dem „automatischen“ Text Max bei Max-Incontent und den 1FR-Divs den verbleibenden Raum teilen. Wenn sich der Browser verengt, werden die Autospalten weiter schmaler, bis sie den Schwellenwert der Minenabrechnung erreichen.
Siehe den Stift CSS Grid Repeat (): Auto von SitePoint (@sitepoint) auf Codepen.
In der obigen Demo beginnen die Divs nur, den Container zu überfließen, sobald jede Spalte ihren Min-In-Intensiva-Schwellenwert erreicht hat. (Das heißt, der Text kann nicht weiter wickeln.)
Hinweis: Auto scheint sich nur wie oben beschrieben zu verhalten, wenn sie mit anderen Werten gemischt werden. Allein - wie Wiederholung (3, Auto) - verhält es sich genauso wie wir Wiederholung (3, 1fr).
Die Funktion minmax () nimmt zwei eigene Argumente auf - ein Mindest- und Maximalwert, das durch ein Komma getrennt ist. Mit Minmax () können wir also eine Reihe möglicher Größen für Tracks in einer flexiblen Umgebung festlegen.
Zum Beispiel könnten wir eine Spalte auf Minmax (40px, 100px) einstellen, was bedeutet, dass die minimal mögliche Breite 40px beträgt und die maximal mögliche Breite 100px beträgt.
Beide Argumente von minmax () können Längenwerte wie FR, PX, EM, % und CH sowie MIN-Content, Max-In-Content und Auto annehmen. Es ist jedoch am besten, einen Längenwert für mindestens ein Argument zu verwenden, da die Keywords nicht als beide Argumente funktionieren sollen (obwohl ich dies manchmal funktioniert-wie Minmax (Min-In-Content, Max-in-in-In-Inhalt)).Der folgende Code legt fünf Spalten mit jeweils eine minimale Breite von 60px und eine maximale Breite von 1FR:
fest:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Siehe den Stift CSS Grid Repeat (): minmax () von sitepoint (@sinepoint) auf Codepen.
Dies funktioniert gut, bis die Mindestbreite von 60px erreicht ist. Danach beginnt der Inhalt aus seinem Behälter abzuhängen. Wir werden sehen, wie wir bald ein besseres Ergebnis erzielen können.
Die Funktion minmax () kann auch entweder die Funktion min () oder max () als Argument haben. Beide nehmen zwei Werte an. Die min () -Funktion gilt, je nachdem, was auch immer der kleinere seiner beiden Werte ist, und die MAX () -Funktion gilt, je nachdem, welcher Wert der größere Wert ist. Dies ist nützlich in reaktionsschnellen Umgebungen.
zum Beispiel:
<span>grid-template-columns: repeat(5, 1fr); </span>
Siehe den Stift CSS Grid Repeat (): minmax () Funktion mit min () von sitepoint (@sinepoint) auf Codepen.
Der obige Code legt fünf Spalten fest. Auf breiten Browsern sind die fünf Spalten gleichermaßen bei 1FR verteilt. Auf schmaleren Geräten werden die Spalten enger und schmaler. Sie werden aufhören zu schrumpfen, sobald sie den niedrigeren 60px und 8 VW getroffen haben. Wir können uns also immer noch mit Inhalten befinden, die auf schmalen Bildschirmen aus dem Behälter hängen. Es gibt noch weiter, um voll und ganz zu reagieren.
Wenn Sie die Kombination von minmax (), min () und max () in diesem Stadium etwas überwältigend finden, bleiben Sie dort, da ihre wirkliche Kraft unten zu sehen ist, wenn wir automatisch und automatisch treffen. füllen.
Die Funktion für fit-content () nimmt ein einzelnes Argument an, das die maximale Größe darstellt, zu der eine Spur wachsen kann. Der Track kann also bis zu diesem Punkt flexibel sein. Fit-Content () kann einen beliebigen Längenwert wie FR, PX, EM, % und Ch. nehmen
Wenn wir beispielsweise drei Spalten und Fit-Content (120px) festlegen, reagieren die Spaltenbreiten bis zu einer Breite von 120px:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Verwenden Sie benannte Zeilen mit repualt ()
Hier ist ein einfaches Beispiel. Die genannten Linien sind die Bits in quadratischen Klammern ([]):
<span>grid-template-columns: repeat(5, 1fr); </span>
können wir auch benannte Zeilen in unserer Funktion repep () verwenden:
<span>article {
</span> <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>
<span>article {
</span> <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span> 
Die Schlüsselwörter für automatische und automatische Füllung sind Alternativen zum Einstellen einer festen Anzahl von Tracks. Sie fordern den Browser an, so viele Spuren in einen bestimmten Raum zu passen. Zum Beispiel:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Siehe den Stift CSS Grid Repeat (): Auto-Fit und Auto-Fill von SitePoint (@sinepoint) auf Codepen.
In der obigen Demo sind Divs auf eine Breite von 150px gesetzt, und diejenigen, die nicht in eine Zeile passen, fallen auf die nächste. Wenn wir automatisch in die automatische Füllung wechseln, sehen wir keinen Unterschied, da sie unter diesen Bedingungen beide dasselbe tun. Die Unterschiede zwischen ihnen werden nur unter besonderen Umständen offensichtlich.
Zu diesem Zeitpunkt ist automatisch zu automatisch Fill okay
, aber nichts besonders Blitz. Wenn sie mit Minmax () und min () kombiniert werden, beginnt die wahre Magie. Schauen wir uns das nächste Mal an.Wenn Sie noch nicht in Repeat () verliebt sind, wird die Kombination von Repeat () mit Auto-Fit, Minmax () und Min () sicherlich Cupids Pfeil Ihr hartnäckiges Herz durchstechen. Mit ihrer Kombination können wir wirklich reaktionsschnelle Layouts ohne die Verwendung von Medienfragen erstellen.
verwenden
Betrachten Sie das folgende CSS:<span>grid-template-columns: repeat(5, 1fr); </span>
In diesem Beispiel legt Minmax () eine minimale Spaltenbreite von 200px und maximal 1FR fest. Die folgende Demo zeigt dies in Aktion.
Siehe den Stift CSS Grid Repeat (): automatisch und minmax () von sitepoint (@sinepoint) auf Codepen.
Jedes Div muss mindestens 200px breit sein. Wenn rechts zusätzlichen Platz vorhanden ist (weniger als 200 Pixel), dehnen sich die Divs aus, um den Platz zu füllen. Wenn wir den Browser erweitern, wird in der Reihe ein weiteres Div hinzugefügt, sobald weitere 200 Pixel Platz verfügbar sind. Das Gleiche passiert umgekehrt: Wenn wir den Browser eingrenzen, fällt die letzte Div in der Reihe fallen, wenn es nicht mindestens 200 Pess Platz gibt, in das er passt. Und sobald es gesunken ist, erweitern sich die verbleibenden Divs, um die Reihe zu füllen.
Wenn wir erneut automatisch gegen die automatische Fill tauschen, sehen wir dasselbe Verhalten.
Es gibt jedoch eine Einschränkung mit diesem Beispiel. Wenn wir das Browserfenster so eng genug machen, werden wir eine einzige Spalte haben. Da diese Spalte schmaler wird als 200px, werden die Divs ihren Container überlaufen.
Wir können verhindern, dass dieser Überlauf min () in die Mischung bringt. Schauen wir uns das nächste Mal an.
Wir können steuern, was bei kleinen Breiten passiert, indem wir min () einführen. Lassen Sie uns unseren Code aktualisieren, um so auszusehen:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Jetzt gibt es zwei Optionen für die minimale Spaltenbreite. Der Browser wählt , je nachdem, welcher der kleinste ist. Sobald die Spalte schmaler als 200px ist, ist 100% der kleinere Wert, sodass sie sich durchsetzt. Und dies bedeutet, dass die einzelne verbleibende Spalte jetzt auf Breite eingestellt ist: 100%, sodass sie weiterhin gut in ihren Behälter passt, wenn sie immer abnehmende Breiten abnehmen. (Drücken Sie das Browserfenster so weit wie möglich nach unten, um dies in der Praxis zu sehen.)
Siehe den Stift CSS Grid Repeat (): minmax () und min () von sitepoint (@sinepoint) auf Codepen.
Für eine reale Demo der Verwendung von Repeat () mit automatischem Fit, Minmax () und Min () finden Sie die folgenden Codepen-Demo einer reaktionsschnellen Bildergalerie. Diese Demo nutzt auch die Aspekt-Verhältnis-Eigenschaft, die wir mit der Verwendung von CSS-Aspektverhältnissen behandelt haben.
Siehe den Stift Responsive Bildergalerie mit Aspektverhältnis von SitePoint (@sinepoint) auf Codepen.
In den Beispielen, die wir bisher gesehen haben, scheint es keinerlei Unterschied zwischen automatischer und automatischer Fill zu geben. Der Unterschied erscheint nur in bestimmten Situationen, die wir jetzt kurz behandeln werden.
wir werden unsere Demo -HTML so ausziehen, dass es nur vier Divs gibt, und das folgende CSS festlegen:
<span>grid-template-columns: repeat(5, 1fr); </span>
Das Bild unten zeigt, was wir mit automatischer Fill bekommen.
Der Browser berechnet, wie viele Divs in den Behälter passen und ihnen Platz verlässt. Jedes der vorhandenen Divs ist 110px breit, ebenso wie die Räume nach rechts.
Lassen Sie uns zu automatischem Wechsel wechseln:
<span>article {
</span> <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>
Was sollen wir von all dem machen? Realistisch gesehen möchten wir in den meisten, wenn nicht allen Umständen, dass wir automatisch angemessen werden möchten, da wir nicht oft der Platz haben wollen, dass Platz leer bleibt, wenn wir ihn für unseren Inhalt verwenden könnten.
Sie können in dieser Codepen-Demo mit automatischer und automatischer Füllung herumspielen. Versuchen Sie, automatisch in die automatische Füllung zu wechseln und den Browser zu vergrößen und zusammenzuziehen, um zu sehen, wie sich beide verhalten.
Wie oben erwähnt, kann die Funktion repuple () als Teil einer längeren Deklaration mit Raster-Template-Säulen und Gitter-Template-Reihen verwendet werden. Die meisten Freunde, die wir hier kennengelernt haben-Längeneinheiten, Mincontent, Max-Content, Auto, Minmax (), Fit-Content () und Named Lines-arbeiten zusammen mit Repeat () sowie darin. (Sie können Beispiele dafür sehen
Einige Kombinationen sind für das Track -Argument nicht zulässig. Zum Beispiel können wir so etwas wie Wiederholung nicht verwenden (automatisch, 1FR). Auto-fit und flexible Einheiten können nicht zusammen spielen, da wir dort irgendwo ein festes Maß benötigen, wie z. B. Minmax (100px, 1fr).Wie wir gesehen haben, kann die Funktion minmax () entweder eine verschachtelte min () oder max () -Funktion haben. Es kann auch einen von Auto, Min-In-Incontent, Max-Inhalt enthalten, jedoch nicht von zwei. Zum Beispiel konnten wir Minmax (50px, Max-in-in-Konzent), aber nicht Minmax (Min-In-Content, Max-In-Inhalt) verwenden (obwohl ich ehrlich gesagt habe, dass einige dieser Kombinationen
do do scheinen sowieso zu funktionieren).
Die Wiederholung () Notation kann nicht verschachtelt werden. Wir können also keine Wiederholung () innerhalb einer Wiederholung () haben. Aber wir können sicherlich wiederholen () Funktionen nebeneinander - wie Wiederholung (5, 1FR) 100px Repeat (2, 50px).
Die Funktion repep () ist ein unglaublich nützliches Werkzeug, um wiederholte Muster von Gittersäulen und Zeilen herauszulegen. Es kann verwendet werden, um vollständig reaktionsschnelle Layouts ohne Medienabfragen in einer einzigen Codezeile zu erstellen.
In den meisten Fällen müssen Sie mit Repeat () nicht zu weit im Unkraut zu weit gehen. Die beeindruckendste Funktion wird in einem einfachen Beispiel wie folgt zusammengefasst:
<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr; </span>
Stellen Sie sicher
Sie können hier mehr über die Funktion repep () erfahren:
Für eine allgemeinere Einführung in das CSS -Gitterlayout finden Sie eine Einführung in die CSS -Gitterlayouts.
Kann ich die Wiederholungsfunktion mit verschiedenen Spurgrößen verwenden? Die Wiederholungsfunktion akzeptiert zwei Argumente: die Anzahl der Wiederholungen und die Spurgröße. Wenn Sie ein Gitter mit Spuren verschiedener Größen erstellen möchten, können Sie die Wiederholungsfunktion mehrmals in derselben Eigenschaft verwenden. Zum Beispiel "Grid-Template-Säulen: Wiederholung (2, 100px) Wiederholung (3, 200px)"; Erstellt ein Raster mit zwei Spalten von 100px und drei Spalten von 200px. Funktion zum automatischen Füllen des Gitterbehälters mit so vielen Tracks, wie er passen kann. Die Größe der Spuren wird als zweites Argument der Wiederholungsfunktion angegeben. Wenn die Größe des Containers die Gesamtgröße der Spuren überschreitet, wird der verbleibende Raum gleichermaßen auf die Spuren verteilt. Zum Beispiel "Grid-Template-Säulen: Wiederholung (Auto-Fill, 100px); Erstellt so viele 100px -Spalten, wie es in den Container passen kann.
Was passiert, wenn ich die Wiederholungsfunktion mit einer negativen Zahl verwende? Die Wiederholungsfunktion mit einer negativen Zahl, der Browser ignoriert die Regel und das Netz wird nicht erstellt. Die Wiederholungsfunktion akzeptiert nur positive Ganzzahlen als Anzahl der Wiederholungen.
Kann ich die Wiederholungsfunktion mit Medienabfragen verwenden? . Sie können verschiedene Gitterlayouts für verschiedene Bildschirmgrößen mit der Wiederholungsfunktion in einer Medienabfrage definieren. Zum Beispiel möchten Sie möglicherweise zwei Spalten auf kleinen Bildschirmen und vier Spalten auf großen Bildschirmen anzeigen. Dies kann mit dem folgenden Code erreicht werden:
@media (max-Width: 600px) {}
}Grid-Template-Säulen: Wiederholung (4, 1fr);
}Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS Grid repep () -Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Windows kann die Formatierung der Festplatte nicht abschließen
Welches hat eine schnellere Lesegeschwindigkeit, Mongodb oder Redis?
Überprüfen Sie den Speicherplatz unter Linux
Der Computer friert ein. Der Bildschirm bleibt hängen
MySQL-Paging
Zu den Kerntechnologien des Big-Data-Analysesystems gehören:
Was sind die internationalen Postfächer?
Welche virtuellen Währungen könnten im Jahr 2024 stark ansteigen?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
