Grid/Flex-visualizer registrerer alle CSS Grid og Flexbox-beholdere på en webside og gengiver deres layoutstruktur som farverige overlays direkte på siden. Se gitterlinjer, spor-størrelser, gap-værdier, flex-retninger, justeringsakser og underelements størrelse — alt visualiseret uden at åbne DevTools.
CSS Grid og Flexbox er grundlaget for moderne web-layout, men de er usynlige som standard. Du kan ikke se gitterlinjer, flex-akser eller gap-værdier bare ved at se på en side. Browser-DevTools tilbyder nogle gitteroverlay-funktioner, men de kræver, at du først finder beholderen i Elements-panelet, aktiverer overlayet manuelt og viser kun én beholder ad gangen. Grid/Flex-visualizer automatiserer dette fuldstændigt — det scanner siden, finder alle Grid og Flex-beholdere og gengiver deres layoutstruktur som visuelle overlays. Grid-beholdere viser kolonne- og rækkelinjer med spor-størrelser mærket. Flex-beholdere viser den primære akse-retning, krydsakse-justering og hvordan plads fordeles. Gaps fremhæves med farvede bånd, der viser deres pixelværdier. Klik på en beholder for at se et detaljeret egenskabspanel med alle layoutegenskaber listet.
Grid-beholdere viser farvede linjer for hvert række- og kolonnespor. Spor-størrelser (1fr, auto, 200px) er mærket på hver linje. Gap-områder fremhæves med semitransparente bånd, der viser gap-værdien i pixels. Implicitte og eksplicitte spor skelnes ved solide vs. stiplede linjer.
Flex-beholdere viser den primære akse som en pil (row, row-reverse, column, column-reverse) og krydsaksen vinkelret på den. justify-content og align-items visualiseres med mærkede justeringsindikatorer, der viser, hvordan plads fordeles mellem children.
Værktøjet scanner automatisk hele siden og finder hvert element med display: grid eller display: flex (inklusive inline-varianter). Et mærke-tal viser det samlede antal registreret. Intet behov for manuelt at vælge elementer — de er alle fundet og listet automatisk.
Klik på en beholder for at se dens komplette layoutegenskaber: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap og alle child-størrelsesegenskaber (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Hvert child-element inden for en Grid eller Flex-beholder viser sin faktiske gengivne størrelse, flex-grow/shrink-værdier og grid-areaplacering. Se præcis, hvor meget plads hvert child optager og hvorfor.
Registrerer Grid og Flex-beholdere indlejret inden i andre Grid/Flex-beholdere. Overlayet gengiver hvert indlejringsniveau med forskellige farver, så du kan se det komplette layouthierarki.
En gitterkolonne er bredere eller smallere end forventet? Overlayet viser de faktiske sporsstørrelser (1fr opløst til 342px, auto opløst til 156px), så du kan se præcis, hvordan browseren beregnede størrelserne.
Hvorfor er ét flex-child bredere end et andet? Visualizeren viser flex-grow, flex-shrink og flex-basis-værdier for hvert child, hvilket gør pladsfordelingslogikken synlig.
Ændr størrelse på browseren og se gitter-overlayet opdatere i realtid. Se hvordan grid-template-columns ændres fra 1fr 1fr 1fr på desktop til 1fr på mobil og verificer overgangen ved hvert breakpoint.
Besøg velbyggede websteder og se, hvordan de bruger Grid og Flex-layouts i produktion. De visuelle overlays gør abstrakte koncepter (fr-enheder, auto-fit, justify-content) håndgribelige og interaktive.
Tjek at alle kortgitter på en side bruger det samme antal kolonner og gap-værdier. Overlayet gør inkonsistenser øjeblikkeligt synlige — én sektion med 20px gap mens en anden bruger 24px er tydelig med et øjekast.
Åbn den flydende DevSuite Pro-dock, og klik på Grid/Flex-visualizer-ikonet. Værktøjet scanner siden og registrerer alle Grid og Flex-beholdere.
Alle Grid og Flex-beholdere får et farvet kant-overlay. Et panel viser alle registrerede beholdere med deres type (Grid eller Flex) og element-selektor.
Klik på en beholder for at se dens komplette layoutegenskaber. Grid-beholdere viser sporlinjer og størrelser; Flex-beholdere viser akseretninger og justering.
Hvert child-element viser sin beregnede størrelse og layoutspecifikke egenskaber (flex-grow, grid-area). Forstå, hvordan plads fordeles blandt children.
Klik på værktøjsikonet igen for at fjerne alle overlays og vende tilbage til den normale sidevisning.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.
