Skills
.Work. You
Rest

building-layouts

Community

Responsive layouts with CSS

Software Engineering#layout#responsive design#css#flexbox#grid#container queries
Authoralexejluft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers make web components responsive by providing clear decision-making guidance on when to use CSS Grid, Flexbox, or Container Queries, especially for components that need to adapt to their parent container's width rather than the viewport.

Core Features & Use Cases

  • Layout Decision Tree: A simple flowchart to choose between Grid, Flexbox, and Container Queries.
  • Container Query Implementation: Demonstrates the correct CSS for using Container Queries to make components responsive to their parent's size.
  • Grid & Flexbox Essentials: Covers key properties like fr units, repeat(auto-fit, minmax()), justify-content, and align-items.
  • Common Mistakes: Highlights and corrects frequent errors, such as using media queries for component-level responsiveness.

Quick Start

Use the building-layouts skill to determine whether to use Grid, Flexbox, or Container Queries for a new responsive card component.

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: building-layouts
Download link: https://github.com/alexejluft/brudi/archive/main.zip#building-layouts

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.