CSS Grid Visual Inspector is an interactive tool for visually building and debugging CSS Grid layouts. Through visual grid preview and parameter adjustment, quickly generate Grid layout code.
• Visual grid preview: Real-time Grid layout display
• Interactive configuration: Adjust rows, columns, sizes, gaps
• Cell selection: Set grid-column/row span
• Alignment control: justify/align-items property adjustment
• Code generation: Auto-generate CSS+HTML code
• Multiple size units: fr/px/%/auto/minmax()
1. Set column and row counts
2. Configure each column/row size (e.g. 1fr 200px auto)
3. Adjust gap spacing and alignment
4. Click cells to set span areas
5. Copy the generated CSS and HTML code
• Page Layout: Quickly build responsive page grid layouts
• Component Design: Design card, dashboard component layouts
• Learning Grid: Interactive CSS Grid property learning
• Layout Debug: Visually debug Grid layout issues
CSS Grid Layout is a W3C two-dimensional layout system, supported by all major browsers since 2017. Core concepts include Grid Container (display:grid), Grid Items (children), Grid Lines, Grid Tracks (row/column tracks), Grid Areas (named regions). The fr unit is Grid-specific, representing proportional shares of available space.
CSS Grid is a two-dimensional layout system in CSS that controls both rows and columns. It defines grids via grid-template-rows/columns, with children placed using grid-row/column.
Set row/column counts and sizes, click cells in the visual grid to adjust positions, and the tool auto-generates CSS code. Supports gap, alignment, and other properties.
Supports grid-template-columns/rows, gap, grid-column/row (with span), justify/align-items, grid-template-areas, and other core properties.
Yes. Supports px, fr, %, auto, minmax(), repeat() and all CSS Grid size units.
Yes. Standard CSS Grid syntax, directly copyable into your project.
Yes. Define grid-template-areas through named regions in the visual interface.