Grid/Flex Visualizer détecte chaque conteneur CSS Grid et Flexbox d'une page web et affiche leur structure de mise en page sous forme d'overlays colorés directement sur la page. Visualisez les lignes de grid, les tailles de pistes, les valeurs de gap, les directions flex, les axes d'alignement et le dimensionnement des éléments enfants — le tout sans ouvrir les DevTools.
CSS Grid et Flexbox constituent les fondations de la mise en page web moderne, mais ils sont invisibles par défaut. On ne peut pas voir les lignes de grid, les axes flex ou les valeurs de gap en observant simplement une page. Les DevTools du navigateur proposent quelques fonctionnalités d'overlay grid, mais elles nécessitent de trouver d'abord le conteneur dans le panneau Elements, d'activer l'overlay manuellement, et n'affichent qu'un seul conteneur à la fois. Grid/Flex Visualizer automatise entièrement ce processus — il analyse la page, trouve chaque conteneur Grid et Flex, et affiche leur structure de mise en page sous forme d'overlays visuels. Les conteneurs Grid affichent les lignes de colonnes et de rangées avec les tailles de pistes étiquetées. Les conteneurs Flex indiquent la direction de l'axe principal, l'alignement de l'axe transversal et la distribution de l'espace. Les gap sont mis en évidence par des bandes colorées affichant leurs valeurs en pixels. Cliquez sur un conteneur pour accéder à un panneau de propriétés détaillé listant chaque propriété de mise en page.
Les conteneurs Grid affichent des lignes colorées pour chaque piste de rangée et de colonne. Les tailles de pistes (1fr, auto, 200px) sont étiquetées sur chaque ligne. Les zones de gap sont mises en évidence par des bandes semi-transparentes affichant la valeur du gap en pixels. Les pistes implicites et explicites sont distinguées par des lignes continues ou en pointillés.
Les conteneurs Flex affichent l'axe principal sous forme de flèche (row, row-reverse, column, column-reverse) et l'axe transversal perpendiculaire. justify-content et align-items sont visualisés avec des indicateurs d'alignement étiquetés montrant comment l'espace est distribué entre les enfants.
L'outil analyse automatiquement la page entière et trouve chaque élément avec display: grid ou display: flex (y compris les variantes inline). Un badge indique le nombre total détecté. Inutile de sélectionner les éléments manuellement — ils sont tous trouvés et listés automatiquement.
Cliquez sur un conteneur pour voir ses propriétés de mise en page complètes : grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, ainsi que toutes les propriétés de dimensionnement des enfants (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Chaque élément enfant au sein d'un conteneur Grid ou Flex affiche sa taille rendue réelle, les valeurs flex-grow/shrink et le placement dans la grid area. Voyez exactement quelle quantité d'espace chaque enfant occupe et pourquoi.
Détecte les conteneurs Grid et Flex imbriqués dans d'autres conteneurs Grid/Flex. L'overlay affiche chaque niveau d'imbrication avec des couleurs différentes afin que vous puissiez voir la hiérarchie complète de la mise en page.
Une colonne de grid est plus large ou plus étroite que prévu ? L'overlay affiche les tailles de pistes réelles (1fr résolu à 342px, auto résolu à 156px) afin que vous puissiez voir exactement comment le navigateur a calculé les tailles.
Pourquoi un enfant flex est-il plus large qu'un autre ? Le visualiseur affiche les valeurs flex-grow, flex-shrink et flex-basis pour chaque enfant, rendant la logique de distribution de l'espace visible.
Redimensionnez le navigateur et observez la mise à jour de l'overlay grid en temps réel. Voyez comment grid-template-columns passe de « 1fr 1fr 1fr » sur ordinateur à « 1fr » sur mobile, et vérifiez la transition à chaque breakpoint.
Visitez des sites bien construits et observez comment ils utilisent les mises en page Grid et Flex en production. Les overlays visuels rendent les concepts abstraits (fr units, auto-fit, justify-content) tangibles et interactifs.
Vérifiez que toutes les grilles de cartes d'une page utilisent le même nombre de colonnes et les mêmes valeurs de gap. L'overlay rend les incohérences immédiatement visibles — une section utilisant un gap de 20px tandis qu'une autre utilise 24px est évidente au premier coup d'œil.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Grid/Flex Visualizer. L'outil analyse la page et détecte tous les conteneurs Grid et Flex.
Chaque conteneur Grid et Flex reçoit un overlay de bordure colorée. Un panneau liste tous les conteneurs détectés avec leur type (Grid ou Flex) et le sélecteur d'élément.
Cliquez sur un conteneur pour voir ses propriétés de mise en page complètes. Les conteneurs Grid affichent les lignes de pistes et les tailles ; les conteneurs Flex affichent les directions d'axes et l'alignement.
Chaque élément enfant affiche sa taille calculée et ses propriétés spécifiques à la mise en page (flex-grow, grid-area). Comprenez comment l'espace est distribué entre les enfants.
Cliquez à nouveau sur l'icône de l'outil pour supprimer tous les overlays et revenir à l'affichage normal de la page.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
