Grid/Flex Visualizer detecteert alle CSS Grid- en Flexbox-containers op een webpagina en geeft hun indelingsstructuur weer als kleurrijke overlays rechtstreeks op de pagina. Zie rasterlijnen, sporengroottes, spleetwaarden, flex-richtingen, uitlijningsassen en grootte van onderliggende elementen — allemaal gevisualiseerd zonder DevTools te openen.
CSS Grid en Flexbox zijn de basis van moderne web-indeling, maar zij zijn standaard onzichtbaar. U kunt rasterlijnen, flex-assen of spleetwaarden niet zien door naar een pagina te kijken. Browsertools voor ontwikkelaars bieden enkele rasterverlayeringsfuncties, maar vereisen dat u de container eerst in het Elements-paneel zoekt, de overlay handmatig inschakelt en slechts één container tegelijk toont. Grid/Flex Visualizer automatiseert dit geheel — het scant de pagina, vindt alle Grid- en Flex-containers en geeft hun indelingsstructuur weer als visuele overlays. Rastercontainers tonen lijnen voor elke rij- en kolompunt met grootte gelabeld. Flex-containers tonen de belangrijkste richtingsas, cross-as-uitlijning en hoe ruimte wordt verdeeld. Gaten worden gemarkeerd met gekleurde banden die hun pixelwaarde tonen. Klik op een container om een gedetailleerd eigenschappenpaneel te zien met alle indelingseigenschappen.
Rastercontainers tonen gekleurde lijnen voor elke rij- en kolompuntgrootte. Sporengroottes (1fr, auto, 200px) worden op elke lijn gelabeld. Spleetgebieden worden gemarkeerd met semi-transparante banden met de spleetwaarde in pixels. Impliciete en expliciete sporen worden onderscheiden door ononderbroken versus gestippelde lijnen.
Flex-containers tonen de belangrijkste as als een pijl (rij, rij-omgekeerd, kolom, kolom-omgekeerd) en de cross-as loodrecht daarop. justify-content en align-items worden gevisualiseerd met gelabelde uitlijningsindicatoren die tonen hoe ruimte tussen kinderen wordt verdeeld.
Het gereedschap scant automatisch de gehele pagina en vindt elk element met display: grid of display: flex (inclusief inline-varianten). Een badgecount geeft het totale aantal gedetecteerde containers aan. U hoeft elementen niet handmatig te selecteren — zij worden allemaal automatisch gevonden en weergegeven.
Klik op een container om de volledige indelingseigenschappen ervan te zien: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap en alle grootteeigenschappen voor kinderen (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Elk onderliggend element in een Grid- of Flex-container toont de werkelijk weergegeven grootte, flex-grow/shrink-waarden en grid-gebiedplaatsing. Zie precies hoeveel ruimte elk kind inneemt en waarom.
Detecteert Grid- en Flex-containers genest in andere Grid/Flex-containers. De overlay geeft elk nestniveau weer met verschillende kleuren, zodat u de volledige indelingshiërarchie kunt zien.
Een rasterkolom is breder of smaller dan verwacht? De overlay toont de werkelijke sporengroottes (1fr opgelost tot 342px, auto opgelost tot 156px), zodat u precies kunt zien hoe de browser de grootten berekende.
Waarom is één flex-kind breder dan een ander? De visualizer toont flex-grow, flex-shrink en flex-basis waarden voor elk kind, waardoor de ruimteverdelingslogica zichtbaar wordt.
Wijzig het formaat van de browser en kijk hoe de rasteroverlay in realtime wordt bijgewerkt. Zie hoe grid-template-columns verandert van "1fr 1fr 1fr" bij desktop naar "1fr" op mobiel en controleer de overgang op elk breekpunt.
Bezoek goed gebouwde websites en bekijk hoe zij Grid- en Flex-indelingen in productie gebruiken. De visuele overlays maken abstracte concepten (fr-eenheden, auto-fit, justify-content) tastbaar en interactief.
Controleer of alle kaartrastels op een pagina hetzelfde aantal kolommen en spleetwaarden gebruiken. De overlay maakt inconsistenties onmiddellijk zichtbaar — één sectie met 20px-spleet terwijl een ander 24px gebruikt, is duidelijk in één oogopslag.
Open het floating dock van DevSuite Pro en klik op het Grid/Flex Visualizer-pictogram. Het gereedschap scant de pagina en detecteert alle Grid- en Flex-containers.
Elke Grid- en Flex-container krijgt een gekleurde randoverlay. Een paneel geeft alle gedetecteerde containers met hun type (Grid of Flex) en elementselector weer.
Klik op een container om de volledige indelingseigenschappen ervan te zien. Rastercontainers tonen rasterlijnen en -grootten; Flex-containers tonen asrichtingen en uitlijning.
Elk onderliggend element geeft de berekende grootte en indelingsspecifieke eigenschappen weer (flex-grow, grid-area). Begrijp hoe ruimte onder kinderen wordt verdeeld.
Klik opnieuw op het gereedschapcpictogram om alle overlays te verwijderen en terug te keren naar de normale paginaweergave.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
