Czym jest CSS Grid?
CSS Grid Layout to dwuwymiarowy system układu wbudowany w nowoczesne przeglądarki. Definiujesz kontener siatki za pomocą display: grid, następnie kontrolujesz kolumny za pomocą grid-template-columns i wiersze za pomocą grid-template-rows. Jednostki ułamkowe (fr) proporcjonalnie rozdzielają dostępną przestrzeń. Elementy podrzędne mogą obejmować wiele kolumn lub wierszy za pomocą grid-column: span N i grid-row: span N.
Jak używać Generatora CSS Grid
-
Ustaw liczbę kolumn i wierszy za pomocą pól liczbowych (1–12 dla każdego).
-
Dostosuj grid-template-columns i grid-template-rows, aby kontrolować rozmiary (np. 1fr 2fr, 200px auto).
-
Ustaw odstęp między komórkami (np. 10px, 1rem).
-
Kliknij dowolną komórkę w podglądzie, aby ją zaznaczyć (zmieni kolor na pomarańczowy).
-
Ustaw col-span i row-span w panelu Rozpiętość komórki, a następnie kliknij Zastosuj. Komórki z rozpiętością staną się zielone.
-
Kliknij zakładkę CSS lub HTML, aby przełączyć format wyjściowy, a następnie skopiuj do schowka.
-
Kliknij Resetuj wszystko, aby zacząć od nowa z nową siatką 3×3.