CSS Grid Layout

Creates sophisticated page layouts using CSS Grid, the most powerful two-dimensional layout system in CSS. Covers grid template definitions, named grid areas, auto-placement algorithms, responsive patterns with auto-fit/auto-fill and minmax(), subgrid, alignment properties, and practical layout recipes for common UI patterns like dashboards, card grids, and holy grail layouts.

Usage

Describe the layout you need to build: how many columns and rows, how items should be sized and positioned, and how it should adapt to different screen sizes. Provide a rough sketch description or reference a common layout pattern. The skill generates complete CSS Grid code with HTML structure guidance.

Examples

• "Create a responsive card grid that auto-fills columns of minimum 300px with equal-height cards"
• "Build a dashboard layout with fixed sidebar, header, main content area, and collapsible panels"
• "Design a magazine-style layout where featured articles span multiple grid cells"
• "Create a responsive image gallery that maintains aspect ratios across different grid cell sizes"

Guidelines

• Use grid-template-areas for complex layouts to make the visual structure clear and maintainable
• Prefer fr units over percentages for flexible track sizing to properly handle gaps
• Use minmax(min, 1fr) to set minimum sizes while allowing tracks to grow proportionally
• Combine auto-fit with minmax() for intrinsically responsive grids without media queries
• Use place-items, place-content, and place-self for concise alignment control on both axes
• Leverage the implicit grid for dynamic content but define explicit tracks for predictable layouts
• Use subgrid when child elements need to align with the parent grid's tracks (modern browsers)
• Test grid layouts with CSS Grid DevTools in Firefox or Chrome for visual debugging of tracks and areas