# UI Responsive Grids

> Advanced CSS Grid and Flexbox techniques for layouts that adapt seamlessly to any device.

- Skill: `jcorpac/ui-responsive-grids` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jcorpac/ui-responsive-grids`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jcorpac/ui-responsive-grids/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jcorpac (https://skillmd.com/u/jcorpac)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jcorpac/ui-responsive-grids

---


# Responsive Grids

A layout should be fluid, not just "breakpoint-dependent." This skill explores the power of modern CSS for flexible design.

## CSS Grid
- **Auto-Fill vs. Auto-Fit**: Create many-column layouts that adjust automatically without media queries.
- **Fractional Units (fr)**: Flexible distribution of space.
- **Grid Areas**: For semantic, easy-to-read layout structures.

## Flexbox
- **Alignment**: Mastering `justify-content` and `align-items`.
- **Flex-Grow/Shrink**: Controlling how items fill or squeeze into space.
- **Gap**: Using the modern `gap` property instead of margin hacking.

## The "Modern" Breakpoint
Instead of hardcoding device widths, use `minmax()` and `clamp()` to create truly fluid typography and layouts.
`width: clamp(300px, 50%, 800px);`