Works with Lovelace YAML configurations, native layout cards, and mobile-first responsive patterns.

Home Assistant Dashboard Layouts

Create responsive Home Assistant Lovelace dashboards using native layout types.

When to Use This Skill

Use this skill when you need to:

Arrange cards vertically (top-to-bottom stacking) for sequential information
Place cards side-by-side horizontally for comparisons or related controls
Create multi-column grid layouts that automatically reflow on mobile
Build full-screen panel views for maps, cameras, or single-focus displays
Nest layouts for complex dashboard designs with sections
Make dashboards responsive with automatic mobile stacking

Do NOT use when:

You need conditional card visibility (use ha-conditional-cards instead)
Building forms or input interfaces (use entities card or custom forms)
You need advanced CSS Grid features (consider layout-card from HACS)

Usage

Identify user intent: Map natural language ("side by side", "3 columns") to layout type
Choose layout: vertical-stack (top to bottom), horizontal-stack (side by side), grid (multi-column), panel (full-screen)
Apply configuration: Add YAML with appropriate type and options
Test responsiveness: Verify mobile behavior (grid auto-stacks, horizontal stays side-by-side)
Refine: Adjust columns, square property, or nest layouts for complex designs

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

Safety Notice

Copy this and send it to your AI assistant to learn