Plac zabaw CSS Grid

Wszystkie narzędzia

Twórz wizualnie szablony CSS Grid, odstępy i rozmieszczenie, a następnie kopiuj CSS układu.

Podgląd

Kliknij numerowany element w siatce, aby go zaznaczyć i przesunąć.

grid-template-columns —
grid-template-rows —
Wygenerowany CSS
—
—
Kolumny
Wiersze
Odstępy
16px
16px
Wyrównanie
Elementy siatki
Element 1
Gotowe ustawienia

O Plac zabaw CSS Grid

CSS Grid Playground pozwala wizualnie tworzyć prawdziwe układy grid. Dodawaj i usuwaj ścieżki kolumn oraz wierszy, aby kształtować grid-template-columns i grid-template-rows, ustawiaj odstępy między kolumnami i wierszami oraz dostrajaj wszystkie cztery właściwości wyrównania — justify-items, align-items, justify-content i align-content — a podgląd natychmiast odzwierciedla każdą zmianę.

Umieszczanie elementów to miejsce, w którym siatki pokazują swoją siłę: dodawaj elementy, kliknij jeden z nich w podglądzie, aby go zaznaczyć, i pozycjonuj go za pomocą column start, column span, row start oraz row span. W ten sposób powstają paski boczne, nagłówki i komórki wyróżnione rozciągnięte na wiele ścieżek — technika stojąca za niemal każdym prawdziwym układem grid.

Trzy gotowe szablony — holy grail, dashboard i gallery — wczytują klasyczne struktury stron, które możesz przeanalizować i dostosować. Gdy układ będzie odpowiedni, skopiuj wygenerowany CSS zawierający kompletne reguły kontenera grid oraz umiejscowienie każdego elementu.

Jak korzystać z Plac zabaw CSS Grid

  1. Dodaj lub usuń ścieżki kolumn i wierszy, aby zdefiniować szablon siatki.
  2. Ustaw odstęp między kolumnami i wierszami.
  3. Dostosuj kontrolki wyrównania: justify-items, align-items, justify-content i align-content.
  4. Dodaj elementy, kliknij jeden z nich w podglądzie i ustaw jego start/rozpiętość w kolumnie i wierszu, aby go umieścić.
  5. Wczytaj szablon holy grail, dashboard lub gallery, aby przeanalizować klasyczny układ.
  6. Skopiuj wygenerowany CSS do swojego arkusza stylów.

Najczęściej zadawane pytania

justify-items wyrównuje każdy element wewnątrz jego własnej komórki siatki; justify-content wyrównuje całą siatkę wewnątrz kontenera, gdy ścieżki go nie wypełniają. Ta sama zasada obowiązuje w pionie w przypadku align-items i align-content.

Zaznacz element i zwiększ jego rozpiętość kolumn — wynikowy CSS używa grid-column z wartością span. W połączeniu z rozpiętością wierszy możesz zbudować paski nagłówka, panele boczne i duże komórki wyróżnione w ramach tej samej siatki.

Klasyczny szkielet strony: nagłówek i stopka na pełną szerokość z trzema kolumnami pomiędzy nimi — nawigacją, treścią główną i kolumną boczną. Kiedyś był notorycznie kłopotliwy przy użyciu float; ten szablon pokazuje, jak kilka umiejscowień grid rozwiązuje to elegancko.

Grid sprawdza się w układach dwuwymiarowych, w których wiersze i kolumny muszą się wyrównywać — szkielet strony, panele, galerie. Flexbox jest najlepszy do przepływów jednowymiarowych, jak paski narzędzi i menu. Dobrze się łączą: grid dla strony, flex wewnątrz komponentów.

Tak, jest darmowy i działa w przeglądarce — eksperymentuj tak długo, jak chcesz, a to, co tworzysz, nigdy nie opuszcza Twojego komputera.
Udostępnij
Powiązane narzędzia
Kreator podpisu e-mail Zaprojektuj profesjonalny podpis HTML do e-maila korzystając z 30 szablonów, dostosuj go i zapisz. Bezpłatnie
Ikona do PNG Konwertuj Bootstrap Icons, Font Awesome i inne na niestandardowe obrazy PNG — bezpłatnie, w przeglądarce. Bezpłatnie
Generator ikon aplikacji Wygeneruj kompletny, gotowy do publikacji zestaw ikon aplikacji dla App Store i Google Play — eleganckie tła gradientowe, siatkowe i wzorzyste, zbudowane z Twojego logo. Bezpłatnie
Generator faviconów Zbuduj kompletny pakiet faviconów z logo, ikony czcionkowej lub monogramu — favicon.ico, nowoczesne pliki PNG, ikona Apple touch, ikony PWA, manifest webowy i fragment HTML. Bezpłatnie
Generator cieni CSS box-shadow Twórz warstwowe cienie CSS box-shadow z suwakami do przesunięcia, rozmycia, rozrostu, koloru, krycia i wcięcia — podgląd na prawdziwym elemencie i gotowy CSS do skopiowania. Bezpłatnie
Generator zaokrągleń CSS (border-radius) Twórz wizualnie border-radius CSS z podglądem na żywo i kopiuj gotowy do użycia kod. Bezpłatnie
Popularne wyszukiwania
generator css grid plac zabaw css grid generator grid-template-columns generator układu css grid kreator grid-template-areas narzędzie do odstępów css grid wizualizator css grid
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.