Wizualizator Grid/Flex wykrywa każdy kontener CSS Grid i Flexbox na stronie i renderuje ich strukturę układu jako kolorowe nakładki bezpośrednio na stronie. Zobacz linie siatki, rozmiary ścieżek, wartości odstępów, kierunki flex, osie wyrównania i rozmiary elementów podrzędnych — wszystko wizualizowane bez otwierania DevTools.
CSS Grid i Flexbox to fundamenty nowoczesnego układu webowego, ale domyślnie są niewidoczne. Nie możesz zobaczyć linii siatki, osi flex ani wartości gap tylko patrząc na stronę. DevTools przeglądarki oferują niektóre funkcje nakładki siatki, ale wymagają najpierw znalezienia kontenera w panelu Elements, ręcznego włączenia nakładki i pokazują tylko jeden kontener naraz. Wizualizator Grid/Flex automatyzuje to całkowicie — skanuje stronę, znajduje każdy kontener Grid i Flex i renderuje ich strukturę układu jako wizualne nakładki. Kontenery Grid pokazują linie kolumn i wierszy z oznaczonymi rozmiarami ścieżek. Kontenery Flex pokazują kierunek osi głównej, wyrównanie osi poprzecznej i jak przestrzeń jest dystrybuowana. Przerwy są podświetlone kolorowymi pasmami pokazującymi ich wartości w pikselach. Kliknij dowolny kontener, aby zobaczyć szczegółowy panel właściwości z każdą wymienioną właściwością układu.
Kontenery Grid pokazują kolorowe linie dla każdej ścieżki wiersza i kolumny. Rozmiary ścieżek (1fr, auto, 200px) są oznaczone na każdej linii. Obszary przerw są podświetlone półprzezroczystymi pasmami pokazującymi wartość gap w pikselach. Ścieżki niejawne i jawne są odróżnione liniami ciągłymi vs przerywanymi.
Kontenery Flex pokazują oś główną jako strzałkę (row, row-reverse, column, column-reverse) i oś poprzeczną prostopadłą do niej. justify-content i align-items są wizualizowane z oznakowanymi wskaźnikami wyrównania pokazującymi, jak przestrzeń jest dystrybuowana między dziećmi.
Narzędzie automatycznie skanuje całą stronę i znajduje każdy element z display: grid lub display: flex (w tym warianty inline). Liczba znaczka pokazuje łączną liczbę wykrytych. Nie ma potrzeby ręcznego wybierania elementów — wszystkie są znajdowane i wymieniane automatycznie.
Kliknij dowolny kontener, aby zobaczyć jego kompletne właściwości układu: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap i wszystkie właściwości rozmiaru dzieci (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Każdy element podrzędny w kontenerze Grid lub Flex pokazuje swój rzeczywisty wyrenderowany rozmiar, wartości flex-grow/shrink i umieszczenie obszaru siatki. Zobacz dokładnie, ile miejsca zajmuje każde dziecko i dlaczego.
Wykrywa kontenery Grid i Flex zagnieżdżone wewnątrz innych kontenerów Grid/Flex. Nakładka renderuje każdy poziom zagnieżdżenia różnymi kolorami, więc możesz zobaczyć kompletną hierarchię układu.
Kolumna siatki jest szersza lub węższa niż oczekiwano? Nakładka pokazuje rzeczywiste rozmiary ścieżek (1fr rozwiązane do 342px, auto rozwiązane do 156px), więc możesz zobaczyć dokładnie, jak przeglądarka obliczyła rozmiary.
Dlaczego jedno dziecko flex jest szersze niż inne? Wizualizator pokazuje wartości flex-grow, flex-shrink i flex-basis dla każdego dziecka, czyniąc logikę dystrybucji przestrzeni widoczną.
Zmień rozmiar przeglądarki i obserwuj aktualizację nakładki siatki w czasie rzeczywistym. Zobacz, jak grid-template-columns zmienia się z "1fr 1fr 1fr" na desktopie do "1fr" na mobilnym, i zweryfikuj przejście przy każdym punkcie przerwania.
Odwiedź dobrze zbudowane strony i zobacz, jak używają układów Grid i Flex w produkcji. Wizualne nakładki sprawiają, że abstrakcyjne koncepcje (jednostki fr, auto-fit, justify-content) stają się namacalne i interaktywne.
Sprawdź, że wszystkie siatki kart na stronie używają tej samej liczby kolumn i wartości gap. Nakładka sprawia, że niespójności są natychmiast widoczne — jedna sekcja używająca gap 20px, podczas gdy inna używa 24px, jest oczywista jednym spojrzeniem.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Wizualizatora Grid/Flex. Narzędzie skanuje stronę i wykrywa wszystkie kontenery Grid i Flex.
Każdy kontener Grid i Flex otrzymuje nakładkę kolorowej ramki. Panel wymienia wszystkie wykryte kontenery z ich typem (Grid lub Flex) i selektorem elementu.
Kliknij dowolny kontener, aby zobaczyć jego kompletne właściwości układu. Kontenery Grid pokazują linie ścieżek i rozmiary; kontenery Flex pokazują kierunki osi i wyrównanie.
Każdy element podrzędny wyświetla swój obliczony rozmiar i właściwości specyficzne dla układu (flex-grow, grid-area). Zrozum, jak przestrzeń jest dystrybuowana między dziećmi.
Kliknij ponownie ikonę narzędzia, aby usunąć wszystkie nakładki i powrócić do normalnego widoku strony.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
