DARMOWE NARZĘDZIE

Grid Template Columns Sandbox

Interaktywna piaskownica CSS Grid – testuj grid-template-columns, rows, gap i wszystkie właściwości układu siatki z podglądem kodu. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Tło

Tryb

Template

36 znaków

Gap

Szerokość

Items

Show index Opcja narzędzia

Comments Opcja narzędzia

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Piaskownica CSS Grid online

CSS Grid to potężny system układu dwuwymiarowego. Piaskownica pozwala testować grid-template-columns, grid-template-rows i gap w czasie rzeczywistym bez pisania kodu.

CSS Grid grid-template-columns piaskownica układu web design

Właściwości do testowania

grid-template-columns (fr, px, %, auto, repeat, minmax), grid-template-rows, gap (column-gap, row-gap), grid-auto-flow, align-items, justify-items.

Elementy siatki

Dodaj dowolną liczbę elementów, ustaw grid-column, grid-row, grid-area dla każdego z nich. Obserwuj rozmieszczenie na żywo.

Najczęstsze pytania

Co to jest jednostka fr?

Fractional unit – dzieli dostępne miejsce proporcjonalnie; 1fr 2fr 1fr da kolumny w stosunku 1:2:1.

Jak wyśrodkować element w siatce?

place-items: center na rodzicu – skrót dla align-items: center + justify-items: center.

Czym różni się od Flexbox?

Grid jest dwuwymiarowy (kolumny I rzędy jednocześnie); Flexbox jest jednowymiarowy – albo rzędy, albo kolumny.

Inne narzędzia CSS: piaskownica Flexbox i generator clip-path.