Skills
.Work. You
Rest

layout-grid

Community

Fluid, responsive grid layouts.

Design & Creative#layout#responsive design#css grid#container queries#css tokens#fluid scaling
AuthorProfPowell
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a robust system for creating fluid, resolution-independent grid layouts that adapt seamlessly across all screen sizes without relying on fixed breakpoints.

Core Features & Use Cases

  • Fluid Scaling: Designs scale proportionally using relative units and clamp().
  • Responsive Columns: Automatically adjusts column counts for optimal card grids and page layouts.
  • Layout Patterns: Implements common patterns like Holy Grail, feature/gallery, and sidebar layouts.
  • Use Case: Design a responsive product listing page where cards automatically reflow and resize to fill available space, ensuring a consistent and appealing layout on both mobile and desktop.

Quick Start

Implement a fluid 12-column grid system for your page layout.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: layout-grid
Download link: https://github.com/ProfPowell/vanilla-breeze/archive/main.zip#layout-grid

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.