repeat() und minmax() in Grid
Erzeugen Sie mit repeat() mehrere Grid-Tracks und definieren Sie mit minmax() flexible Größenbereiche.
repeat() und minmax() in Grid ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
repeat() im Grid-Kontext
repeat(count, track-size) ist eine CSS-Grid-Funktion, die mehrere Track-Definitionen ohne Wiederholung erzeugt. Sie funktioniert innerhalb von grid-template-columns und grid-template-rows.
repeat() mit fester Anzahl
Erstellen Sie 4 gleich große Spalten:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>repeat() mit einem Muster
Wiederholen Sie ein Muster aus Tracks:
<div class="striped-grid">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div>minmax() innerhalb von Tracks
minmax(min, max) definiert einen Größenbereich für einen Track:
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fit mit minmax()
Das Rezept für ein responsives Grid:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>minmax(min-content, max-content)
Für Track-Größen können Schlüsselwörter für intrinsische Größenanpassung verwendet werden:
<div class="labels">
<div>Label</div><div>Value</div>
</div>minmax() in Zeilen
Verwenden Sie minmax() für Zeilen, damit sich deren Höhe am Inhalt orientiert und gleichzeitig ein Minimum eingehalten wird:
<div class="gallery"><div>1</div><div>2</div></div>fit-content() für Spalten
fit-content(max) macht einen Track so breit wie seinen Inhalt, jedoch höchstens bis zu einem angegebenen Maximum – ähnlich wie max-content, aber begrenzt:
<div class="layout"><div>Sidebar</div><div>Main</div></div>repeat() und benannte Linien kombinieren
Wiederholen Sie benannte Linien, um einzelne Spalten über ihren Namen anzusprechen:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fill mit minmax für feste Elemente
Wenn Elemente nicht über ihre natürliche Größe hinaus gedehnt werden sollen:
<div class="gallery">
<div>1</div><div>2</div><div>3</div>
</div>fr im Vergleich zu Prozentangaben im Grid
Im Gegensatz zu Prozentangaben berücksichtigen fr-Einheiten den Platz für gap automatisch. repeat(3, 1fr) mit gap: 24px ergibt drei wirklich gleich große Spalten. Bei Prozentangaben wäre calc() nötig, um den Platz für gap abzuziehen.
Kurzer Test
Was definiert repeat(3, minmax(100px, 1fr))?
Zusammenfassung
repeat(count, track) erzeugt mehrere Tracks ohne Wiederholung. minmax(min, max) definiert flexible Größenbereiche für Tracks. Das Muster repeat(auto-fit, minmax(280px, 1fr)) ist das leistungsfähigste responsive Grid – ganz ohne Media Queries und mit automatisch responsiven Spalten. Verwenden Sie fit-content(max) für inhaltsabhängige Seitenleistenspalten.
Häufig gestellte Fragen
Ist die Lektion „repeat() und minmax() in Grid“ kostenlos?
Ja — der vollständige Text von „repeat() und minmax() in Grid“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „repeat() und minmax() in Grid“?
Erzeugen Sie mit repeat() mehrere Grid-Tracks und definieren Sie mit minmax() flexible Größenbereiche. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „repeat() und minmax() in Grid“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- calc() für dynamische Berechnungen
- min(), max() und clamp() für fließende Werte
- repeat() und minmax() in Grid
- color-mix() und relative Farbsyntax