← Torna alle funzionalità
Pro

Visualizzatore Grid/Flex

Rileva ogni contenitore Grid e Flexbox e ne mostra la struttura come sovrapposizioni colorate.

CSS Grid e Flexbox sono fondamenti del layout web ma invisibili per default. Il Visualizzatore automatizza tutto.

Anteprima dal vivo
example.com/dashboard Grid/Flex: ON
CSS Grid container detected
display: grid
col 1
col 2
col 3
col 1-2 (span 2)
col 3
gap: 8px · grid-template-columns: 1fr 1fr 1fr
Layout Properties
displaygrid
columns1fr 1fr 1fr
rowsauto auto
gap8px
items6 children
Caratteristiche principali

Sovrapposizione linee Grid

Linee colorate per righe e colonne con dimensioni etichettate.

Direzione e allineamento Flex

Asse principale come freccia con indicatori allineamento.

Auto-rilevamento

Trova automaticamente tutti gli elementi grid e flex.

Pannello proprietà

Clicca per vedere tutte le proprieta di layout.

Dimensionamento figli

Ogni figlio mostra dimensione e proprieta layout.

Layout annidati

Rileva grid e flex annidati con colori diversi.

Casi d'uso comuni

Debug tracce Grid

Colonna troppo larga? Sovrapposizione mostra dimensioni reali.

Distribuzione spazio Flex

flex-grow, flex-shrink e flex-basis per ogni figlio.

Grid responsive

Ridimensiona e guarda la sovrapposizione aggiornarsi.

Imparare Grid/Flex

Visita siti per vedere Grid e Flex in produzione.

Audit coerenza

Verifica stesse colonne e gap ovunque.

Come usare
1

Attiva

Apri dock e clicca icona.

2

Visualizza contenitori

Sovrapposizioni colorate su ogni contenitore.

3

Dettagli

Clicca per proprieta complete.

4

Esamina figli

Ogni figlio con dimensioni.

5

Disattiva

Clicca icona per rimuovere.

Pronto a provare? Visualizzatore Grid/Flex?

Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox