Vizualizér Grid/Flex detekuje každý kontejner CSS Grid a Flexbox na webové stránce a vykresluje jejich strukturu rozvržení jako barevné překryvy přímo na stránce. Prohlédněte si čáry mřížky, velikosti stop, hodnoty mezer, směry flex, osy zarovnání a velikost podřízených elementů — vše vizualizováno bez otevření DevTools.
CSS Grid a Flexbox jsou základy moderního webového rozvržení, ale ve výchozím nastavení jsou neviditelné. Pouhým pohledem na stránku nevidíte čáry mřížky, flexové osy ani hodnoty mezer. Prohlížeče DevTools nabízejí některé funkce překryvů mřížky, ale vyžadují, abyste nejprve našli kontejner v panelu Elements, ručně povolili překryv a zobrazují vždy jen jeden kontejner. Vizualizér Grid/Flex toto plně automatizuje — prohledá stránku, najde každý kontejner Grid a Flex a vykreslí jejich strukturu rozvržení jako vizuální překryvy. Kontejnery Grid zobrazují čáry sloupců a řádků s označenými velikostmi stop. Kontejnery Flex zobrazují směr hlavní osy, zarovnání příčné osy a distribuci prostoru. Mezery jsou zvýrazněny barevnými pásy zobrazujícími jejich hodnoty pixelů. Kliknutím na libovolný kontejner zobrazíte podrobný panel vlastností se všemi uvedenými vlastnostmi rozvržení.
Kontejnery Grid zobrazují barevné čáry pro každou stopu řádku a sloupce. Velikosti stop (1fr, auto, 200px) jsou označeny na každé čáře. Oblasti mezer jsou zvýrazněny poloprůhlednými pásy zobrazujícími hodnotu mezery v pixelech. Implicitní a explicitní stopy jsou rozlišeny plnými vs přerušovanými čárami.
Kontejnery Flex zobrazují hlavní osu jako šipku (row, row-reverse, column, column-reverse) a příčnou osu kolmo k ní. justify-content a align-items jsou vizualizovány s označenými indikátory zarovnání zobrazujícími distribuci prostoru mezi podřízenými elementy.
Nástroj automaticky prohledá celou stránku a najde každý element s display: grid nebo display: flex (včetně inline variant). Počítadlo odznaku zobrazuje celkový počet detekovaných. Není třeba ručně vybírat elementy — všechny jsou nalezeny a automaticky uvedeny.
Kliknutím na libovolný kontejner zobrazíte jeho kompletní vlastnosti rozvržení: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap a všechny vlastnosti velikosti podřízených elementů (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Každý podřízený element v kontejneru Grid nebo Flex zobrazuje svou skutečnou vykreslenou velikost, hodnoty flex-grow/shrink a umístění oblasti mřížky. Přesně vidíte, kolik prostoru každý podřízený element zabírá a proč.
Detekuje kontejnery Grid a Flex vnořené do jiných kontejnerů Grid/Flex. Překryv vykresluje každou úroveň vnoření různými barvami, takže vidíte kompletní hierarchii rozvržení.
Sloupec mřížky je širší nebo užší, než se očekávalo? Překryv zobrazuje skutečné velikosti stop (1fr přeloženo na 342 px, auto přeloženo na 156 px), takže přesně vidíte, jak prohlížeč vypočítal velikosti.
Proč je jeden podřízený flex element širší než jiný? Vizualizér zobrazuje hodnoty flex-grow, flex-shrink a flex-basis pro každý podřízený element, čímž zviditelní logiku distribuce prostoru.
Změňte velikost prohlížeče a sledujte aktualizaci překryvu mřížky v reálném čase. Podívejte se, jak se grid-template-columns mění z 1fr 1fr 1fr na desktopu na 1fr na mobilu a ověřte přechod na každém breakpointu.
Navštivte dobře postavené webové stránky a podívejte se, jak používají rozvržení Grid a Flex v produkci. Vizuální překryvy činí abstraktní koncepty (jednotky fr, auto-fit, justify-content) hmatatelné a interaktivní.
Zkontrolujte, že všechny mřížky karet na stránce používají stejný počet sloupců a hodnoty mezer. Překryv okamžitě zviditelní nekonzistence — jedna sekce používající mezeru 20 px, zatímco jiná 24 px, je zřejmá na první pohled.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Vizualizéru Grid/Flex. Nástroj prohledá stránku a detekuje všechny kontejnery Grid a Flex.
Každý kontejner Grid a Flex dostane překryv s barevným rámečkem. Panel uvádí všechny detekované kontejnery s jejich typem (Grid nebo Flex) a selektorem elementu.
Kliknutím na libovolný kontejner zobrazíte jeho kompletní vlastnosti rozvržení. Kontejnery Grid zobrazují stopy a jejich velikosti; kontejnery Flex zobrazují směry os a zarovnání.
Každý podřízený element zobrazuje vypočítanou velikost a vlastnosti specifické pro rozvržení (flex-grow, grid-area). Pochopte distribuci prostoru mezi podřízenými elementy.
Znovu klikněte na ikonu nástroje pro odebrání všech překryvů a návrat do normálního pohledu na stránku.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
