Generator CSS Grid z podglądem
Ustaw siatkę, wybierz pozycje elementów i sprawdź zachowanie przy różnych szerokościach.
Przejdź do narzędziaUstaw siatkę, wybierz pozycje elementów i sprawdź zachowanie przy różnych szerokościach. Podgląd korzysta z CSS i HTML dostępnych do pobrania.
Spis treści
Podgląd i eksport
Brak gotowego wyniku
Jeśli okno podglądu jest szersze niż ekran, przesuń je poziomo.
Ustaw parametry i utwórz wynik.
Jak działa narzędzie
- Wpisz nazwę klasy CSS i liczbę kolumn. Ustaw odstęp oraz minimalną wysokość wiersza.
- Dobierz wyrównanie elementów w komórkach.
- Dodaj elementy. Wpisz kolumnę i wiersz startowy albo 0, aby pozostawić pozycję automatyczną. Ustaw, ile kolumn i wierszy zajmuje element.
- Wybierz próg mobilny i liczbę kolumn dla węższego widoku.
- Utwórz siatkę. Zmień szerokość podglądu, skopiuj osobno CSS i HTML lub pobierz kompletny przykład.
Szczegóły techniczne
Kolumny mają równe udziały dzięki repeat(n, minmax(0, 1fr)). Automatycznie tworzone wiersze używają minmax z wybraną minimalną wysokością. gap ustawia odstęp w obu osiach. align-items i justify-items sterują wyrównaniem elementu wewnątrz przydzielonego obszaru.
Pozycje są eksportowane jako grid-column i grid-row ze wskazaną rozpiętością span. Kolejność elementów w HTML pozostaje zgodna z listą formularza; zmiana położenia wizualnego nie zmienia kolejności czytania ani tabulacji. Generator odrzuca kolumny poza zakresem i nakładające się pozycje, gdy oba początki zostały jawnie określone.
FAQ
Co oznacza 0 przy kolumnie lub wierszu?
Automatyczne położenie według algorytmu CSS Grid. Wartości od 1 wskazują konkretną linię początkową.
Dlaczego duży element mobilnie zajmuje jedną komórkę?
Reguła mobilna resetuje pozycje oraz rozpiętości. Pozwala to uniknąć kolumn wychodzących poza mały ekran.
Czy kolejność kodu HTML zmienia się wraz z pozycjami?
Nie. Czytniki ekranu i klawiatura korzystają z kolejności DOM. Dopasuj kolejność treści do jej znaczenia.
Ograniczenia narzędzia
Zakres: 1–12 kolumn, 1–24 elementy, odstęp 0–80 px i minimalny wiersz 40–300 px. Mobilnie można ustawić 1–4 kolumny przy progu 320–1200 px. Poniżej progu pozycje i rozpiętości wszystkich elementów wracają do automatycznych, dzięki czemu szerokie kafelki nie wymuszają dodatkowych kolumn.
Podgląd ma własne okno o wybranej szerokości; na małym ekranie można przesunąć je poziomo. Próg odnosi się do szerokości tego okna, a w pobranym HTML do okna przeglądarki. Przykładowe kolory i obramowania są częścią CSS. W aplikacji docelowej inne style i rzeczywista treść mogą wpłynąć na rozmiary. Sprawdź układ po osadzeniu.
Źródła i aktualizacja
- W3C — CSS Grid Layout — sprawdzono 18.09.2026.