CSS Flexbox & Grid Skill Skill

CSS Flexbox & Grid Skill

Master modern CSS layout systems: Flexbox for 1D layouts and CSS Grid for 2D layouts.

Overview

This skill provides atomic, focused guidance on CSS layout techniques with comprehensive parameter validation and practical examples.

Skill Metadata

| Property | Value | |----------|-------| | Category | Layout | | Complexity | Intermediate to Advanced | | Dependencies | css-fundamentals | | Bonded Agent | 02-css-layout-master |

Usage

Skill("css-flexbox-grid")

Parameter Schema

parameters:
  layout_type:
    type: string
    required: true
    enum: [flexbox, grid, comparison, responsive]
    description: Layout system to explore

  pattern:
    type: string
    required: false
    enum: [centering, sidebar, card-grid, holy-grail, navbar, gallery]
    description: Common layout pattern

  include_responsive:
    type: boolean
    required: false
    default: true
    description: Include responsive adaptations

validation:
  - rule: layout_type_required
    message: "layout_type parameter is required"
  - rule: valid_pattern
    message: "pattern must be a recognized layout pattern"

Topics Covered

Flexbox

Container properties: display, flex-direction, flex-wrap
Alignment: justify-content, align-items, align-content
Item properties: flex-grow, flex-shrink, flex-basis
Gap, order, and self-alignment

CSS Grid

Grid template: columns, rows, areas
Grid placement: lines, spans, named areas
Auto-fit, auto-fill, minmax()
Subgrid and masonry (where supported)

Responsive Patterns

Mobile-first approach
Breakpoint strategies
Container queries integration
Fluid layouts with clamp()

Retry Logic

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
  retryable_errors:
    - TIMEOUT
    - RATE_LIMIT

Logging & Observability

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  log_parameters: true
  metrics:
    - invocation_count
    - pattern_usage
    - layout_type_distribution

Quick Reference

Flexbox Cheatsheet

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;          /* nowrap | wrap | wrap-reverse */
  justify-content: center;  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;      /* flex-start | flex-end | center | stretch | baseline */
  gap: 1rem;
}

.item {
  flex: 1 1 auto;          /* grow shrink basis */
  align-self: flex-start;
  order: 0;
}

Grid Cheatsheet

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 1rem;
}

.item {
  grid-column: 1 / 3;      /* start / end */
  grid-row: span 2;
  grid-area: header;
}

Decision Matrix

Need 2D control?
├─ YES → CSS Grid
└─ NO
    ├─ Content determines size? → Flexbox
    ├─ Equal sizing needed? → Grid
    └─ Simple row/column → Flexbox

Common Patterns

Center Anything

/* Flexbox centering */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid centering */
.grid-center {
  display: grid;
  place-items: center;
}

Responsive Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Sidebar Layout

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

Test Template

describe('CSS Flexbox Grid Skill', () => {
  test('validates layout_type parameter', () => {
    expect(() => skill({ layout_type: 'invalid' }))
      .toThrow('layout_type must be one of: flexbox, grid...');
  });

  test('returns flexbox properties for flexbox type', () => {
    const result = skill({ layout_type: 'flexbox' });
    expect(result).toContain('display: flex');
    expect(result).toContain('justify-content');
  });

  test('includes responsive code when flag is true', () => {
    const result = skill({
      layout_type: 'grid',
      pattern: 'card-grid',
      include_responsive: true
    });
    expect(result).toContain('@media');
  });
});

Error Handling

| Error Code | Cause | Recovery | |------------|-------|----------| | INVALID_LAYOUT_TYPE | Unknown layout type | Show valid options | | INCOMPATIBLE_PATTERN | Pattern doesn't fit layout type | Suggest alternative | | MISSING_DEPENDENCY | Fundamentals not understood | Link to css-fundamentals |

Related Skills

css-fundamentals (prerequisite)
css-modern (container queries)
css-architecture (component layout patterns)

Agent Skills: CSS Flexbox & Grid Skill

Skill Files