Generator CSS Grid

CSS Grid Layout to zaawansowany dwuwymiarowy system ukladania elementow jednoczesnie w wierszach i kolumnach. W przeciwienstwie do Flexbox, ktory obsluguje po jednym kierunku naraz, Grid daje pelna kontrole nad obiema osiami. Kluczowe wlasciwosci to grid-template-columns do definiowania sciezek kolumn, grid-template-rows do sciezek wierszy, gap do kontrolowania odstepow oraz grid-area do pozycjonowania elementow w nazwanych regionach.

Uzyj suwaka Kolumny, aby ustawic liczbe kolumn (od 1 do 12). Uzyj suwaka Wiersze dla liczby wierszy (od 1 do 12). Dostosuj suwak Gap, aby kontrolowac odstepy miedzy komorkami (od 0 do 32px). Obszar podgladu wyswietla siatke na zywo z numerowanymi komorkami. Gdy bedziesz zadowolony, skopiuj wygenerowany kod CSS i wklej go do swojego projektu.

grid-template-columns i grid-template-rows definiuja rozmiary sciezek. Funkcja repeat() tworzy rowne sciezki, np. repeat(3, 1fr) tworzy trzy rowne kolumny. Jednostka fr rozdziela dostepna przestrzen proporcjonalnie. gap ustawia odstepy miedzy wierszami i kolumnami. Jesli potrzeba, mozna ustawic rozne wartosci dla row-gap i column-gap.

Uklad Holy Grail: naglowek 3-kolumnowy, glowna tresc z panelem bocznym. Karty dashboardu: repeat(auto-fill, minmax(250px, 1fr)) tworzy responsywne siatki kart. Sekcja hero na pelna szerokosc z trescia ponizej: jedna kolumna obejmujaca wszystkie wiersze. Uklad magazynowy: mieszane zakresy przy uzyciu grid-column i grid-row dla roznych rozmiarow komorek.

Uzyj auto-fill lub auto-fit z minmax() dla plynnnych responsywnych siatek bez media queries. Polacz z clamp() dla elastycznych rozmiarow. Ustaw minimalna szerokosc za pomoca minmax(200px, 1fr), aby elementy nie byly zbyt male. Uzyj media queries do zmiany liczby kolumn w punktach przerwania. Rozwaz container queries dla responsywnosci na poziomie komponentu.