Generator CSS Grid
Buduj układy CSS grid wizualnie.
Ustawienia wstępne układu (10)
Przeciągnij po komórkach, aby zaznaczyć prostokąt, albo klikaj pojedyncze komórki. Każdy nazwany obszar musi pozostać prostokątny.
Podgląd na żywo
Jednowymiarowy: Generator CSS Flexbox.
Zbuduj siatkę CSS z nazwanymi obszarami
Narysuj siatkę liter dla obszarów szablonu lub wybierz gotowy szablon. Podgląd pokazuje każdy region w innym odcieniu.
FAQ
Czym jest grid-template-areas?
Sposób nazywania obszarów układu (header, sidebar, main…) i rozmieszczania elementów według nazw zamiast numerów linii. Klikaj komórki poniżej, aby wpisywać litery obszarów — CSS aktualizuje się na żywo.
Czy mogę zacząć od ustawienia wstępnego?
Tak — dziesięć ustawień układu, w tym Holy grail, dashboard, magazine i app shell, wczytuje nazwane obszary jednym kliknięciem.
Czy coś jest przesyłane?
Nie. CSS jest generowany w całości w przeglądarce.
Ostatnia aktualizacja: