Grid/Flex Visualizer обнаруживает каждый CSS Grid и Flexbox-контейнер на веб-странице и отображает их структуру макета в виде цветных overlays прямо на странице. Смотрите линии сетки, размеры треков, значения gap, направления flex, оси выравнивания и размеры дочерних элементов — всё визуализируется без открытия DevTools.
CSS Grid и Flexbox — основа современной веб-разметки, но по умолчанию они невидимы. Вы не можете увидеть линии сетки, оси flex или значения gap, просто глядя на страницу. Браузерные DevTools предлагают некоторые функции overlay для grid, но они требуют сначала найти контейнер в панели Elements, вручную включить overlay и показывают только один контейнер за раз. Grid/Flex Visualizer полностью автоматизирует этот процесс — сканирует страницу, находит каждый Grid- и Flex-контейнер и отображает их структуру макета в виде визуальных overlays. Контейнеры Grid показывают линии столбцов и строк с подписанными размерами треков. Контейнеры Flex показывают направление главной оси, выравнивание по поперечной оси и распределение пространства. Отступы (gap) выделяются цветными полосами с их значениями в пикселях. Нажмите на любой контейнер, чтобы увидеть подробную панель со всеми перечисленными свойствами макета.
Контейнеры Grid показывают цветные линии для каждого трека строк и столбцов. Размеры треков (1fr, auto, 200px) подписаны на каждой линии. Области gap выделяются полупрозрачными полосами со значением отступа в пикселях. Явные и неявные треки различаются сплошными и пунктирными линиями.
Контейнеры Flex показывают главную ось в виде стрелки (row, row-reverse, column, column-reverse) и поперечную ось, перпендикулярную ей. justify-content и align-items визуализируются с подписанными индикаторами выравнивания, показывающими распределение пространства между дочерними элементами.
Инструмент автоматически сканирует всю страницу и находит каждый элемент с display: grid или display: flex (включая inline-варианты). Счётчик-значок показывает общее количество обнаруженных контейнеров. Не нужно вручную выбирать элементы — они все найдены и перечислены автоматически.
Нажмите на любой контейнер, чтобы увидеть все его свойства макета: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap и все свойства размеров дочерних элементов (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Каждый дочерний элемент внутри Grid- или Flex-контейнера показывает свой фактический отрисованный размер, значения flex-grow/shrink и размещение в grid area. Смотрите, сколько именно пространства занимает каждый дочерний элемент и почему.
Обнаруживает Grid- и Flex-контейнеры, вложенные в другие Grid/Flex-контейнеры. Overlay отображает каждый уровень вложенности разными цветами, чтобы вы могли увидеть полную иерархию макета.
Столбец сетки шире или уже, чем ожидалось? Overlay показывает фактические размеры треков (1fr вычислен как 342px, auto — как 156px), чтобы вы могли точно видеть, как браузер рассчитал размеры.
Почему один flex-элемент шире другого? Визуализатор показывает значения flex-grow, flex-shrink и flex-basis для каждого дочернего элемента, делая логику распределения пространства наглядной.
Измените размер браузера и наблюдайте, как overlay сетки обновляется в реальном времени. Смотрите, как grid-template-columns меняется с "1fr 1fr 1fr" на десктопе до "1fr" на мобильном, и проверяйте переход на каждой контрольной точке.
Посещайте хорошо выстроенные сайты и смотрите, как они используют Grid- и Flex-макеты в продакшне. Визуальные overlays делают абстрактные концепции (единицы fr, auto-fit, justify-content) ощутимыми и интерактивными.
Убедитесь, что все сетки карточек на странице используют одинаковое количество столбцов и значения gap. Overlay делает несоответствия сразу заметными — одна секция использует gap 20px, а другая 24px видно с первого взгляда.
Откройте плавающую панель DevSuite Pro и нажмите на иконку Grid/Flex Visualizer. Инструмент сканирует страницу и обнаруживает все Grid- и Flex-контейнеры.
Каждый Grid- и Flex-контейнер получает цветной overlay с рамкой. Панель перечисляет все обнаруженные контейнеры с их типом (Grid или Flex) и CSS-селектором элемента.
Нажмите на любой контейнер, чтобы увидеть все его свойства макета. Контейнеры Grid показывают линии треков и размеры; контейнеры Flex — направления осей и выравнивание.
Каждый дочерний элемент отображает своё вычисленное значение размера и специфичные для макета свойства (flex-grow, grid-area). Поймите, как пространство распределяется между дочерними элементами.
Нажмите на иконку инструмента ещё раз, чтобы убрать все overlays и вернуться к обычному виду страницы.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
