Firefox CSS Grid and Flexbox Debugger: The Best Layout Inspector in Any Browser

Firefox's CSS Grid and Flexbox DevTools inspectors are the best in any browser. They have visual overlay tools that make debugging layouts significantly faster. Here's how to use them effectively.

CSS Grid Inspector

When an element with display: grid is in your CSS, Firefox's Inspector shows a grid icon next to that element.

Activating the overlay:

1. F12 → Inspector
2. Select a grid container element
3. Click the grid icon (waffle-like icon) next to the element in the HTML panel
4. A visual overlay appears on the page

What the overlay shows:

• Grid lines with their numbers
• Grid areas (if named areas are defined)
• Column and row numbers
• Grid gaps

The Grid panel (Layout panel):
Inspector → Layout tab (often in the right panel) → Grid section
Lists all grid containers on the page. You can toggle multiple grid overlays simultaneously.

Grid overlay options (in the Layout panel):

• Show line numbers
• Show area names
• Extend grid lines
• Display line numbers on axis that overflows the screen

CSS Flexbox Inspector

Similar to Grid, but for flex containers.

Activating:

1. Select an element with display: flex
2. Click the "flex" badge next to it in the Inspector
3. Or: Layout panel → Flexbox section

Flex item overlay:

• Shows available space
• Shows flex item sizes and their growth/shrink behavior
• Arrows showing flex direction

Editing Grid Properties Live

In the Rules panel (CSS rules for selected element), you can click on grid values to edit them:

.grid-container {
  grid-template-columns: 1fr 2fr 1fr; /* click to edit */
  grid-template-rows: auto auto;
  gap: 16px;
}

Clicking the color-coded value opens a mini editor. For grid templates, there's visual feedback as you type.

Shorthand vs longhand: Firefox's Inspector shows expanded (longhand) values. grid: ... shorthand expands to individual grid-template-rows, grid-template-columns, etc. properties so you can see each value.

Common Grid Debugging Scenarios

Problem: Items not in expected grid cells

1. Activate grid overlay
2. Check line numbers in overlay
3. Verify grid-column and grid-row assignments on each item

.item { grid-column: 2 / 4; } /* spans from line 2 to line 4 */

The overlay makes line 2 and line 4 visually obvious.

Problem: Unexpected alignment

Check in Inspector:

• justify-content (aligns rows on the block axis)
• align-content (aligns columns on the inline axis)
• justify-items / align-items (align items within their cells)

Hover over the property values in the Rules panel — Firefox shows a small visual that explains what each alignment value does.

Problem: Grid items overflowing

1. Inspector → Box Model panel: see exact computed width/height
2. Overflow indicator: if an element is overflowing, the Inspector sometimes highlights it
3. Console: element.scrollWidth > element.clientWidth returns true if content overflows

Flexbox Debugging

Problem: Items not wrapping

Check:

• flex-wrap: nowrap vs flex-wrap: wrap
• Container width — if it's max-content, wrapping won't happen

In the Flexbox overlay, you can see whether there's available space that should trigger wrapping.

Problem: Item growing more than expected

The flex shorthand expands to three values:

/* These are equivalent: */
flex: 1;
/* Is: */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-basis: 0% means items start at 0 width and grow proportionally. flex-basis: auto means items start at their content size and then grow/shrink.

In Inspector → Layout → Flexbox, you see each item's calculated size, including how much it grew/shrank.

Problem: Gap between flex items

Use gap (or column-gap / row-gap) instead of margins:

.flex-container {
  display: flex;
  gap: 16px; /* Applies between items, not on edges */
}

Check in overlay: gaps show as colored spaces between items.

Grid Template Areas

Named grid areas are powerful and visually inspectable:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

In Firefox DevTools:

• The grid overlay shows area names in each cell
• Switch between "Show line numbers" and "Show area names" in the Layout panel
• Named areas appear as colored regions

This makes debugging template areas much faster than counting line numbers.

Responsive Grid Debugging

Use Firefox's Responsive Design Mode with the Grid inspector:

1. Ctrl+Shift+M to open Responsive Design Mode
2. Set a specific viewport width
3. The grid overlay shows how the grid responds at that width
4. Add breakpoints in the CSS (Ctrl+Shift+E → Style Editor → add @media query)
5. Watch the grid overlay change as you resize

Multi-grid debugging:
If your layout has a grid inside a grid (nested grids):

1. Layout panel → Flexbox/Grid section lists all grid containers
2. Toggle individual grid overlays on/off
3. Each overlay has a different color to distinguish them

DevTools Color Coding

Firefox uses color coding in grid/flex overlays:

• Grid lines: light colored by default
• Gaps: slightly different shade
• Items: not colored by default (you see their content)
• Named areas: color-highlighted when "Show area names" is on

Customize overlay colors: Layout panel → click the colored square next to any grid container to change its overlay color.

Console Queries for Layout Debugging

// Find all grid containers
[...document.querySelectorAll('*')].filter(el => 
  getComputedStyle(el).display === 'grid'
)

// Find all flex containers
[...document.querySelectorAll('*')].filter(el => 
  getComputedStyle(el).display === 'flex'
)

// Check a specific element's grid column/row placement
const el = document.querySelector('.my-element');
const style = getComputedStyle(el);
console.log('grid-column:', style.gridColumnStart, '-', style.gridColumnEnd);
console.log('grid-row:', style.gridRowStart, '-', style.gridRowEnd);

Firefox vs Chrome for Grid/Flex Debugging

Both browsers have grid/flex inspectors. Firefox's is widely considered better:

• Firefox's grid overlay is more detailed and more customizable
• Firefox's Layout panel shows all grids/flexboxes on the page simultaneously
• Firefox's overlay extension lines (extending grid lines to page edges) helps with alignment debugging
• The color customization in Firefox is more flexible

Chrome's grid inspector is also capable, but Firefox's has been the gold standard for layout debugging since it was introduced in Firefox 52.