responsive-layout

name	Responsive Layout
description	ENFORCE fluid, intrinsic layout techniques using CSS constraint-based sizing (clamp(), minmax(), auto-fit). Prevent fixed-width overflow, breakpoint explosion, magic-number spacing, and horizontal scrollbars. Use container queries for component-level responsiveness. Trigger: "make it responsive", "build the grid", "fix the mobile view", "adjust the layout".
category	ui-ux
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["Tailwind CSS v4","CSS Modules","Vanilla CSS"]
triggers	[{"pattern":"(make|build|create|convert) (it|this|the page) responsive","action":"APPLY fluid layout techniques"},{"pattern":"fix (the|this) mobile (view|layout)","action":"CHECK for overflow → APPLY fluid sizing"},{"pattern":"(build|create) (a|the) grid","action":"USE auto-fit + minmax() instead of breakpoint columns"}]
related_skills	["no-slop-landing-page-architecture","dashboard-information-architecture","performance-budgets-and-cwv"]

Responsive Layout Math

IDENTIFY: When to Activate

Activate when:

• Defining page layout, grid, or card arrangement
• Setting typography or spacing between viewports
• User reports mobile layout issues
• Creating any new component that needs multi-viewport support

CORE PRINCIPLE

Tell the browser WHAT you want, not HOW to do it. Use CSS constraint-based sizing (clamp(), min(), max(), minmax(), auto-fit). Avoid hardcoded breakpoints for grids and typography.

TECHNIQUE SELECTION

ASSUMPTION: Tailwind CSS v4 (CSS-native config via @theme). If v3 detected (tailwind.config.ts), adjust utility class syntax accordingly.

IF building a grid of items (cards, posts, products) →
  USE auto-fit + minmax(), Step 1
IF setting font sizes →
  USE clamp(), Step 2
IF defining spacing →
  USE 8px grid system, Step 3
IF setting container widths →
  USE w-full + max-w-*, Step 4
IF making a component responsive to its parent →
  USE container queries, Step 5
IF sizing touch targets →
  USE 44×44px minimum, Step 6

EXECUTE: Instructions

Step 1: Fluid Grids with auto-fit + minmax()

NEVER use breakpoint-dependent column counts:

/* ❌ THREE media queries for one grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ✅ ONE rule, works at EVERY viewport */
.grid {
  display: grid;
  : (auto-fit, ((, ), fr));
  : ;
}