repeat() i minmax() w Grid
Nauczy się Pan/Pani generować wiele ścieżek siatki i definiować elastyczne zakresy rozmiarów za pomocą repeat() i minmax().
repeat() i minmax() w Grid to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
repeat() w kontekście Grid
Funkcja repeat(count, track-size) to funkcja CSS Grid generująca wiele definicji ścieżek bez ich powtarzania. Działa wewnątrz grid-template-columns i grid-template-rows.
repeat() ze stałą liczbą
Utwórz 4 równe kolumny:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>repeat() ze wzorcem
Powtórz wzorzec ścieżek:
<div class="striped-grid">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div>minmax() wewnątrz ścieżek
Funkcja minmax(min, max) definiuje zakres rozmiaru ścieżki:
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fit z minmax()
Responsywny przepis na siatkę:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>minmax(min-content, max-content)
Rozmiary ścieżek mogą używać słów kluczowych określających rozmiar intrynsyczny:
<div class="labels">
<div>Label</div><div>Value</div>
</div>minmax() w wierszach
Użyj minmax() dla wierszy, aby umożliwić uzależnienie wysokości od zawartości przy jednoczesnym określeniu minimum:
<div class="gallery"><div>1</div><div>2</div></div>fit-content() dla kolumn
Funkcja fit-content(max) sprawia, że ścieżka ma szerokość wynikającą z zawartości, maksymalnie do określonej wartości — podobnie jak max-content, ale z ograniczeniem:
<div class="layout"><div>Sidebar</div><div>Main</div></div>Łączenie repeat() i nazwanych linii
Powtórz nazwane linie, aby odwoływać się do poszczególnych kolumn po nazwie:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fill z minmax dla elementów o stałym rozmiarze
Gdy elementy nie powinny rozciągać się poza swój naturalny rozmiar:
<div class="gallery">
<div>1</div><div>2</div><div>3</div>
</div>fr a wartości procentowe w Grid
W przeciwieństwie do wartości procentowych jednostki fr automatycznie uwzględniają miejsce na gap. repeat(3, 1fr) z gap: 24px tworzy 3 naprawdę równe kolumny. Wartości procentowe wymagałyby użycia calc() do odjęcia miejsca na gap.
Szybkie sprawdzenie
Co definiuje wyrażenie repeat(3, minmax(100px, 1fr))?
Podsumowanie
Funkcja repeat(count, track) generuje wiele ścieżek bez ich powtarzania. Funkcja minmax(min, max) definiuje elastyczne zakresy rozmiarów ścieżek. Wzorzec repeat(auto-fit, minmax(280px, 1fr)) to najbardziej przydatny responsywny układ Grid — bez zapytań media i z kolumnami automatycznie dostosowującymi się do dostępnego miejsca. Użyj fit-content(max) dla kolumn bocznych uwzględniających zawartość.
Często zadawane pytania
Czy lekcja „repeat() i minmax() w Grid” jest bezpłatna?
Tak — pełny tekst „repeat() i minmax() w Grid” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „repeat() i minmax() w Grid”?
Nauczy się Pan/Pani generować wiele ścieżek siatki i definiować elastyczne zakresy rozmiarów za pomocą repeat() i minmax(). Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „repeat() i minmax() w Grid”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- calc() do dynamicznych obliczeń
- min(), max() i clamp() dla płynnych wartości
- repeat() i minmax() w Grid
- color-mix() i składnia względnych kolorów