responsive-layout-builder
Responsive Layout Builder guides you through constructing layouts that adapt seamlessly to any device. It covers Grid and Flexbox techniques, mobile-first strategies, and practical patterns like sidebars, card grids, and hero sections.
Responsive Layout Builder helps you create layouts that work across all screen sizes using CSS Grid and Flexbox.
AI-generated summary based on this skill's SKILL.md
Install
OneWave-AI/claude-skills/responsive-layout-builder
git clone https://github.com/OneWave-AI/claude-skills
cp -r claude-skills/responsive-layout-builder ~/.claude/skills/responsive-layout-buildernpx skillfed install OneWave-AI/claude-skills/responsive-layout-builderFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to build responsive layouts with CSS Grid?
Responsive Layout Builder teaches you to construct Grid layouts that adapt across devices using auto-fit, auto-fill, and minmax() functions. Start by defining column tracks with flexible sizing—like grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))—which automatically adjusts column count based on available space. Combine Grid with media queries to refine layouts at specific breakpoints, and use CSS custom properties for consistent spacing and sizing across responsive tiers.
What's the difference between flexbox vs grid for responsive design?
Responsive Layout Builder clarifies that Flexbox excels at one-dimensional layouts—rows or columns—making it ideal for navigation bars, sidebars, and component-level alignment. Grid handles two-dimensional layouts, perfect for page-level structures like card grids and holy grail patterns. Use Flexbox for linear flows and alignment; use Grid when you need precise row and column control. Often, combine both: Grid for overall page structure, Flexbox within Grid items.
How do I create a mobile-first layout design?
Responsive Layout Builder recommends starting with mobile styles as your base, then progressively enhance for larger screens using min-width media queries. Begin with single-column layouts, stack components vertically, and use touch-friendly sizing. Layer breakpoints upward—typically at 640px, 768px, 1024px—adding multi-column grids and advanced layouts as viewport width increases. This approach ensures core functionality works everywhere while larger screens gain sophisticated layouts.
What are common responsive layout patterns and techniques?
Responsive Layout Builder covers essential patterns: card grids using Grid's auto-fit, hero sections with background images and overlays, sticky headers with position: sticky, sidebars using Flexbox or Grid, and the holy grail layout combining both techniques. Additional patterns include collapsible navigation, responsive typography using clamp(), and masonry-style grids. Each pattern includes mobile-first breakpoints and fallbacks for older browsers.
How can I fix layout issues across different screen sizes?
Responsive Layout Builder helps diagnose and resolve cross-device layout problems by testing across multiple viewports and using browser DevTools. Check that Grid tracks and Flexbox flex values scale appropriately, verify media query breakpoints align with your design, and ensure images and text scale with container queries or clamp(). Use min() and max() functions for fluid sizing, and test on real devices or emulators to catch overflow, misalignment, and spacing issues early.
What CSS media queries and breakpoints should I use?
Responsive Layout Builder suggests common breakpoints: 640px (mobile), 768px (tablet), 1024px (desktop), and 1280px (large screens), though your design may vary. Use min-width queries for mobile-first approaches: @media (min-width: 768px) { ... }. Combine breakpoints with container queries for component-level responsiveness. Define breakpoints in CSS custom properties for consistency, and test beyond standard sizes to ensure layouts degrade gracefully on edge cases.
SKILL.md
rendered from the published skill — quoted content, verbatim
Responsive Layout Builder
Instructions
When building responsive layouts:
- Identify the layout pattern (grid, sidebar, cards, etc.)
- Start mobile-first
- Use appropriate CSS technique (Grid vs Flexbox)
- Add breakpoints for larger screens
- Test across viewports
Breakpoints
/* Tailwind defaults */
sm: 640px /* Small devices */
md: 768px /* Tablets */
lg: 1024px /* Laptops */
xl: 1280px /* Desktops */
2xl: 1536px /* Large screens */
/* Custom CSS */
@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
Common Layout Patterns
1. Holy Grail Layout
```tsx // Tailwind CSS <div className="min-h-screen flex flex-col"> <header className="h-16 bg-white border-b">Header</header>
<div className="flex-1 flex"> <aside className="hidden md:block w-64 bg-gray-50 border-r"> Sidebar </aside> <main className="flex-1 p-6"> Main Content </main>
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
responsive-layout-builder/SKILL.md