name: ha-dashboard-layouts description: "Design Home Assistant Lovelace dashboard layouts using vertical-stack, horizontal-stack, grid layouts (2/3/4 columns, square cards), panel views, and nested layouts. Use when user asks to arrange HA dashboard cards, wants specific layout patterns ("side by side", "3 columns", "stacked vertically"), needs responsive layouts, or mentions layout types explicitly. Triggers: "layout", "grid", "columns", "side by side", "stack", "arrange cards", "panel view"."

Home Assistant Dashboard Layouts

Create responsive Home Assistant Lovelace dashboards using native layout types.

How to Request Layouts

Map user's natural language to layout types:

Vertical Stack (top to bottom):

"Stack these vertically"
"Put these one below the other"
"Top to bottom"

Horizontal Stack (side by side):

"Put these side by side"
"Arrange them horizontally"
"Next to each other"
"Layout in a row"

Grid Layouts:

"Use a 3-column grid" → columns: 3
"Grid with columns: 4" → columns: 4
"Two columns side by side" → columns: 2
"Make cards square" → square: true
"Equal height and width" → square: true

Panel View (full-screen single card):

"Make this type: panel"
"Full-screen card"
"Kiosk mode"

Nested Layouts:

"Vertical stack with horizontal rows"
"Put separator, then gauges horizontal, then graph below"
"Stack sections vertically, but put cards side-by-side"

Layout Types Quick Reference

1. Vertical Stack

Cards stack top to bottom, full width.

{
    "type": "vertical-stack",
    "cards": [
        {"type": "entity", "entity": "sensor.temperature"},
        {"type": "entity", "entity": "sensor.humidity"},
        {"type": "entity", "entity": "sensor.pressure"},
    ]
}

Use when: Cards should stack regardless of screen size.

2. Horizontal Stack

Cards arranged left to right, equal width distribution.

{
    "type": "horizontal-stack",
    "cards": [
        {"type": "entity", "entity": "sensor.temperature"},
        {"type": "entity", "entity": "sensor.humidity"},
    ]
}

Use when: Cards should appear side-by-side on desktop and mobile. Limit to 2-3 cards (more gets cramped on mobile).

3. Grid Layouts

Multi-column grid with automatic mobile reflow.

# 3-column grid
{
    "type": "grid",
    "columns": 3,  # Auto-stacks to 1 column on mobile
    "cards": [
        {"type": "entity", "entity": "sensor.temp1"},
        {"type": "entity", "entity": "sensor.temp2"},
        {"type": "entity", "entity": "sensor.temp3"},
        {"type": "entity", "entity": "sensor.temp4"},
        # Cards wrap to next row
    ]
}

# Square cards (equal width/height)
{
    "type": "grid",
    "columns": 3,
    "square": True,  # Forces equal aspect ratio
    "cards": [...]
}

Common column counts:

columns: 2 → Mobile-friendly, compact
columns: 3 → Balanced tablet/desktop
columns: 4 → Wide desktop screens

Use square: true when: Uniform appearance needed (gauges, icons, visual consistency).

4. Panel View

Full-screen single card (view-level property, not card type).

{
    "views": [
        {
            "title": "Map",
            "type": "panel",  # ← VIEW property
            "cards": [
                {"type": "map", "entities": ["person.john"]}
                # Only ONE card allowed
            ]
        }
    ]
}

Use when: Full-screen dashboards, kiosk mode, maps, cameras, single-focus displays.

5. Nested Layouts

Combine layouts for complex designs.

# Pattern: Vertical stack containing sections
{
    "type": "vertical-stack",
    "cards": [
        # Section 1: Horizontal cards
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Quick Controls",
        },
        {
            "type": "horizontal-stack",
            "cards": [
                {"type": "entity", "entity": "sensor.temp"},
                {"type": "entity", "entity": "sensor.humidity"},
            ]
        },
        # Section 2: Grid layout
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Sensors",
        },
        {
            "type": "grid",
            "columns": 3,
            "cards": [
                {"type": "entity", "entity": "sensor.pm25"},
                {"type": "entity", "entity": "sensor.co2"},
                {"type": "entity", "entity": "sensor.voc"},
            ]
        },
    ]
}

Common nesting patterns:

vertical-stack → horizontal-stack (sections with side-by-side cards)
vertical-stack → grid (sections with multi-column cards)
horizontal-stack → vertical-stack (two-column responsive layout)

Mobile Responsiveness

Grid cards automatically reflow:

Desktop: Respects columns value
Mobile: Stacks to 1 column
No media queries needed

Horizontal stacks:

Remain side-by-side on mobile
Use sparingly (2-3 cards max)

Best practices:

Test on actual mobile device (browser resize ≠ mobile behavior)
Place frequently-used controls at top
Use columns: 2 or columns: 3 for mobile-friendly grids

Advanced Layouts

For more complex requirements, see reference files:

references/sections-view.md - Modern drag-and-drop Sections View (HA 2024+)
references/layout-card.md - HACS layout-card with CSS Grid and media queries
references/view-types.md - Masonry, Sidebar, and other view types
references/responsive-patterns.md - Advanced mobile-first patterns

Common Dashboard Patterns

Temperature Gauges in Grid

{
    "type": "grid",
    "columns": 4,
    "cards": [
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.office_temperature",
            "name": "Office",
            "min": 10,
            "max": 40,
        },
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.living_room_temperature",
            "name": "Living Room",
            "min": 10,
            "max": 40,
        },
        # ... more gauges
    ]
}

Gauge + Graph Side-by-Side

{
    "type": "horizontal-stack",
    "cards": [
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.temperature",
            "name": "Current",
        },
        {
            "type": "custom:mini-graph-card",
            "entity": "sensor.temperature",
            "name": "24h Trend",
            "hours_to_show": 24,
        },
    ]
}

Section with Separator

{
    "type": "vertical-stack",
    "cards": [
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Climate",
            "icon": "mdi:thermometer",
        },
        {
            "type": "grid",
            "columns": 3,
            "cards": [
                # Climate cards here
            ],
        },
    ]
}

ha-dashboard-layouts

SKILL.md