Generator CSS Grid
Darmowy generator układu CSS Grid online, edytor wizualny
Podstawy CSS Grid Layout
CSS Grid to dwuwymiarowy system układów do rozmieszczania elementów w wierszach i kolumnach. Kluczowe właściwości: grid-template-columns definiuje ścieżki kolumn, grid-template-rows definiuje ścieżki wierszy, gap kontroluje odstępy, a grid-area pozycjonuje elementy. Grid doskonale sprawdza się w układach na poziomie strony.
Jak używać generatora Grid
Ustaw liczbę kolumn i wierszy. Podgląd pokazuje układ siatki. Dostosuj rozmiary i odstępy. Skopiuj wygenerowany kod CSS do swojego projektu.
▶Kiedy powinienem używać Grid, a kiedy Flexbox?
Używaj Grid dla dwuwymiarowych układów (wiersze I kolumny jednocześnie). Używaj Flexbox dla jednowymiarowych układów (albo wiersz ALBO kolumna). Grid jest lepszy do układów stron; Flexbox jest lepszy do układów komponentów.
▶Co to jest jednostka fr w CSS Grid?
fr (fraction) to elastyczna jednostka rozdzielająca pozostałą przestrzeń. grid-template-columns: 1fr 2fr daje drugiej kolumnie dwa razy więcej miejsca niż pierwszej. Jest podobna do flex-grow we Flexbox.
▶Czy elementy Grid mogą rozciągać się na wiele komórek?
Tak. Użyj grid-column: span 2 lub grid-row: span 2, aby element rozciągał się na wiele kolumn lub wierszy. Możesz też użyć nazwanych obszarów siatki dla złożonych układów.