Generator CSS Grid
Czym jest CSS Grid?
CSS Grid Layout to najpotężniejszy system układów w CSS. Jest to system dwuwymiarowy obsługujący kolumny i wiersze, w przeciwieństwie do flexbox, który jest głównie jednowymiarowy.
Jak używać tego generatora CSS Grid
Ustaw wymiary siatki
Użyj kontrolek bocznych, aby zdefiniować kolumny, wiersze i odstępy.
Zdefiniuj obszary
Kliknij i przeciągnij na podglądzie, aby wybrać prostokątne obszary.
Dostosuj jednostki
Dostosuj rozmiary kolumn i wierszy za pomocą pól wejściowych.
Wypróbuj szablon
Wybierz z gotowych układów jak Holy Grail, Blog lub Dashboard.
Generuj kod
Kliknij "Generuj kod", aby wyeksportować gotowy CSS i HTML.
Przewodnik po składni CSS Grid
Podstawa CSS Grid obejmuje właściwości takie jak grid-template-columns (definiowanie szerokości kolumn), grid-template-rows (definiowanie wysokości wierszy) oraz grid-gap (ustawianie odstępów). Użycie jednostek ułamkowych (fr) pozwala na tworzenie elastycznych układów dostosowujących się do rozmiaru ekranu.
Przykłady układów CSS Grid
Typowe przykłady obejmują układ 'Holy Grail' (nagłówek, pasek boczny, treść główna, stopka). Dzięki grid-template-areas możesz zdefiniować te regiony przy użyciu intuicyjnych nazw, co sprawia, że kod jest znacznie czystszy i łatwiejszy w utrzymaniu.