Piaskownica CSS Grid

Wszystkie narzędzia dla programistów Bezpłatnie

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 Piaskownica 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 Piaskownica 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
Ikona do PNG
Generator ikon aplikacji
Generator faviconów
Generator cieni CSS box-shadow
Generator zaokrągleń CSS (border-radius)
Generator gradientów CSS
Generator glassmorphism
Generator neumorfizmu
Piaskownica Flexbox
Piaskownica Bootstrap Flex
Piaskownica siatki Bootstrap
Edytor wygładzania cubic-bézier
Generator fikcyjnych danych
Generator kodów QR
Skaner kodów QR
Tablica online
Generator kodów kreskowych
Kreator wykresów
Generator UUID / ULID
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.