Generator CSS Grid
Wizualny kreator układów CSS Grid z generowaniem kodu
Ustawienia układu
Gotowe układy
Rozmieszczenie poszczególnych elementów
Wybierz element w podglądzie lub na liście, aby edytować jego właściwości.
Skrócona ściąga po CSS Grid
Ścieżki siatki
Używaj jednostek fr dla elastycznych ścieżek, px/% dla stałych, a auto dla ścieżek dopasowanych do zawartości.
Funkcja repeat()
repeat(3, 1fr) to skrócony zapis 1fr 1fr 1fr. Użyj auto-fill lub auto-fit dla siatek responsywnych.
Rozciąganie elementów
Użyj span N, aby objąć N ścieżek, lub 1 / -1, aby objąć wszystkie kolumny/wiersze.
Podgląd na żywo
Etykiety linii pokazują pierwsze 200 ścieżek. Pełny kod CSS i układ pozostają zachowane.
Wygenerowany CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Zmień ustawienia lub wybierz element. Podgląd i CSS aktualizują się razem.
O generatorze CSS Grid
Generator CSS Grid to interaktywne narzędzie wizualne do projektowania i generowania układów CSS Grid. CSS Grid Layout to najpotężniejszy dwuwymiarowy system układu dostępny w CSS, pozwalający jednocześnie definiować kolumny i wiersze. Narzędzie umożliwia praktyczną naukę, eksperymentowanie i generowanie gotowego do produkcji kodu CSS Grid.
Najważniejsze funkcje
- Pełna kontrola nad grid-template-columns i grid-template-rows z dowolnym zapisem
- Szybkie przyciski kolumn i wierszy do błyskawicznego prototypowania z równymi ścieżkami
- Niezależne suwaki row-gap i column-gap do precyzyjnej kontroli odstępów
- Kontrolki wyrównania justify-items i align-items
- Umieszczanie pojedynczych elementów w grid-column i grid-row z przyciskami szybkich wartości
- Własne etykiety elementów siatki do wizualizacji semantycznych obszarów układu
- Ponumerowane elementy w pastelowych kolorach ze wskaźnikami numerów linii siatki
- Gotowe układy: blog, panel, galeria zdjęć i strona docelowa
- Automatycznie generowany kod CSS z kopiowaniem jednym kliknięciem
- Pełna obsługa trybu ciemnego
Jak działa CSS Grid
CSS Grid polega na zdefiniowaniu kontenera siatki z jawnymi lub niejawnymi ścieżkami (kolumnami i wierszami). Elementy umieszczone w kontenerze są automatycznie rozmieszczane w komórkach, albo można je jawnie ustawić za pomocą właściwości grid-column i grid-row, tak aby obejmowały wiele ścieżek. Jednostka fr oznacza ułamek dostępnej przestrzeni, co ułatwia tworzenie układów responsywnych. Funkcja repeat() upraszcza powtarzalne definicje ścieżek, a funkcje takie jak minmax() oraz auto-fill/auto-fit pozwalają budować naprawdę responsywne siatki bez zapytań medialnych.
Typowe wzorce układów CSS Grid
CSS Grid doskonale nadaje się do układów całych stron, takich jak projekty blogów z obszarami nagłówka, panelu bocznego, treści i stopki; interfejsy paneli z nawigacją, treścią główną i obszarami widżetów; galerie zdjęć z elementami obejmującymi wiele wierszy i kolumn, dające efekt zbliżony do układu masonry; oraz strony docelowe z sekcjami hero na całą szerokość, wielokolumnowymi siatkami funkcji i obszarami wezwania do działania. Użyj przycisków gotowych układów, aby od razu poznać te wzorce.
Grid a Flexbox
Flexbox jest przeznaczony do układów jednowymiarowych (pojedynczy wiersz lub kolumna), natomiast CSS Grid sprawdza się w układach dwuwymiarowych, w których potrzebna jest kontrola nad obiema osiami jednocześnie. Grid najlepiej pasuje do układów stron i złożonych układów komponentów, a Flexbox do rozdzielania przestrzeni między elementami w jednej linii. Wiele nowoczesnych projektów łączy oba rozwiązania: Grid dla ogólnej struktury strony, a Flexbox dla wyrównania na poziomie komponentów.
Dla kogo jest to narzędzie?
- Webdeweloperzy budujący układy stron w CSS Grid
- Inżynierowie frontendu prototypujący responsywne systemy siatek
- Projektanci UI/UX wizualizujący struktury siatek przed wdrożeniem
- Uczniowie i studenci poznający dwuwymiarowe techniki układu CSS
- Nauczyciele wyjaśniający zagadnienia CSS Grid na warsztatach lub zajęciach
- Każdy, kto potrzebuje szybko wygenerować kod CSS Grid do swoich projektów internetowych