Generator Flexbox i CSS Grid

Jak korzystać z generatora flexbox i grid

1. Wybierz Układ: Flexbox lub Grid albo zacznij od jednej z opcji Gotowe układy (Wyśrodkowany, Pasek nawigacji, Zawijane karty, Panel boczny, Responsywna siatka kart, Holy grail, 12 kolumn).
2. Ustaw właściwości w sekcji Kontener. Dla flexboxa: flex-direction i flex-wrap. Dla siatki: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items i grid-template-areas. Oba tryby mają wspólne justify-content, align-items, align-content, row-gap (px) i column-gap (px).
3. Zarządzaj sekcją Elementy przyciskami Dodaj element, Usuń zaznaczony element i Resetuj zaznaczony element. Kliknij element w podglądzie (albo przejdź do niego klawiszem Tab i naciśnij Enter), aby go zaznaczyć.
4. Edytuj zaznaczony element: order i align-self w obu trybach, flex-grow, flex-shrink i flex-basis we flexboxie oraz grid-area, grid-column, grid-row i justify-self w siatce.
5. Skopiuj Kod CSS i pasujący Kod HTML ich przyciskami Kopiuj.

Każda kontrolka to standardowe pole formularza, więc z całego generatora można korzystać wyłącznie za pomocą klawiatury. CSS zawiera tylko właściwości zmienione względem wartości domyślnych, dzięki czemu jest krótki, a elementy o identycznych ustawieniach dzielą jedną regułę (.item, gdy wszystkie są takie same).

Flexbox w pigułce

Flexbox rozmieszcza elementy wzdłuż jednej osi. flex-direction ustala oś główną (wiersz lub kolumnę); justify-content rozkłada elementy wzdłuż niej (center, space-between…), a align-items ustawia je na osi poprzecznej. Przy flex-wrap: wrap elementy, które się nie mieszczą, przechodzą do nowej linii, a align-content rozmieszcza wtedy te linie.

Każdy element ma trzy właściwości rozmiaru, zwykle zapisywane razem jako flex:

• flex-basis: rozmiar początkowy (auto bierze pod uwagę treść lub width);
• flex-grow: jaką część wolnego miejsca zajmuje element (0 = żadnej, 1 = równy udział);
• flex-shrink: ile oddaje, gdy brakuje miejsca (0 = nigdy się nie kurczy).

Układ Panel boczny pokazuje klasyczny wzorzec: panel z flex-basis: 200px i flex-shrink: 0 oraz główny obszar z flex-grow: 1.

CSS Grid w pigułce

Grid rozmieszcza elementy w dwóch wymiarach. grid-template-columns: repeat(3, 1fr) tworzy trzy równe kolumny; fr to udział w wolnym miejscu. repeat(auto-fill, minmax(120px, 1fr)) tworzy tyle kolumn o szerokości co najmniej 120px, ile się zmieści – to responsywna siatka kart bez żadnego media query.

Elementy wypełniają komórki po kolei, chyba że je umieścisz: grid-column: span 2 sprawia, że element ma szerokość dwóch kolumn, a grid-column: 1 / -1 rozciąga go na cały wiersz.

grid-template-areas pozwala „narysować” układ za pomocą nazw. Wpisz jeden wiersz siatki na linię, np. header header, a potem nav main, i nadaj elementom grid-area: header lub grid-area: main. Kropka oznacza pustą komórkę. Każdy wiersz musi mieć tyle samo komórek, a każda nazwa musi tworzyć prostokąt; w przeciwnym razie narzędzie wyświetli ostrzeżenie.