Grid/Flex ビジュアライザーはウェブページ上のすべての CSS Grid および Flexbox コンテナを検出し、そのレイアウト構造をカラフルなオーバーレイとしてページ上に直接レンダリングします。DevTools を開かずに、グリッドライン、トラックサイズ、gap 値、flex の方向、配置軸、子要素のサイズを可視化します。
CSS Grid と Flexbox はモダンなウェブレイアウトの基盤ですが、デフォルトでは不可視です。グリッドライン、flex 軸、gap 値はページを見ただけではわかりません。ブラウザの DevTools にもグリッドオーバーレイ機能はありますが、まず Elements パネルでコンテナを見つけ、手動でオーバーレイを有効にし、一度に一つのコンテナしか表示できません。Grid/Flex ビジュアライザーはこれをすべて自動化します。ページをスキャンしてすべての Grid および Flex コンテナを見つけ、そのレイアウト構造をビジュアルオーバーレイとしてレンダリングします。Grid コンテナにはトラックサイズのラベル付きで列と行のラインが表示されます。Flex コンテナにはメイン軸の方向、クロス軸の配置、スペースの分配が表示されます。gap はピクセル値を示す色付きバンドでハイライト表示されます。任意のコンテナをクリックすると、すべてのレイアウトプロパティが一覧表示された詳細プロパティパネルが開きます。
Grid コンテナにはすべての行と列トラックに色付きラインが表示されます。トラックサイズ（1fr、auto、200px）は各ライン上にラベル表示されます。gap エリアは半透明バンドでハイライト表示され、gap 値がピクセルで示されます。明示的トラックと暗黙的トラックは実線と破線で区別されます。
Flex コンテナにはメイン軸が矢印（row、row-reverse、column、column-reverse）で表示され、それに垂直なクロス軸も示されます。justify-content と align-items は、子要素間のスペース分配を示すラベル付き配置インジケーターとして可視化されます。
ツールがページ全体を自動スキャンし、display: grid または display: flex（インラインバリアントを含む）を持つすべての要素を検出します。バッジカウントで検出された合計数が表示されます。要素を手動で選択する必要はなく、すべて自動的に検出・一覧化されます。
任意のコンテナをクリックすると、完全なレイアウトプロパティが表示されます：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/Flex コンテナの内側にネストされた Grid および Flex コンテナを検出します。オーバーレイはネストの各レベルを異なる色でレンダリングするため、完全なレイアウト階層を確認できます。
グリッドの列が予想より広い、または狭い？オーバーレイは実際のトラックサイズ（1fr が 342px に解決、auto が 156px に解決）を表示するため、ブラウザがどのようにサイズを計算したかを正確に把握できます。
なぜある flex 子要素が他より広いのでしょうか？ビジュアライザーは各子要素の flex-grow、flex-shrink、flex-basis 値を表示し、スペース分配のロジックを可視化します。
ブラウザをリサイズするとグリッドオーバーレイがリアルタイムで更新されます。grid-template-columns がデスクトップで「1fr 1fr 1fr」からモバイルで「1fr」に変わる様子を確認し、各ブレークポイントでの遷移を検証できます。
質の高いウェブサイトを訪問して、実際のプロダクションで Grid と Flex レイアウトがどのように使われているかを確認します。ビジュアルオーバーレイにより抽象的な概念（fr units、auto-fit、justify-content）が具体的かつインタラクティブに理解できます。
ページ上のすべてのカードグリッドが同じ列数と gap 値を使用しているか確認します。オーバーレイにより不一致が一目でわかります。あるセクションが 20px の gap を使用し、別のセクションが 24px を使用していることが一目瞭然です。
DevSuite Pro のフローティングドックを開き、Grid/Flex ビジュアライザーのアイコンをクリックします。ツールがページをスキャンしてすべての Grid および Flex コンテナを検出します。
すべての Grid および Flex コンテナに色付きボーダーオーバーレイが表示されます。パネルには検出されたすべてのコンテナがタイプ（Grid または Flex）と要素セレクターとともに一覧表示されます。
任意のコンテナをクリックして完全なレイアウトプロパティを確認します。Grid コンテナにはトラックラインとサイズが、Flex コンテナには軸の方向と配置が表示されます。
各子要素に計算されたサイズとレイアウト固有のプロパティ（flex-grow、grid-area）が表示されます。子要素間でスペースがどのように分配されているかを理解できます。
ツールアイコンを再度クリックするとすべてのオーバーレイが消え、通常のページ表示に戻ります。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
