# Ha Dashboard Layouts

> 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".

- Skill: `majiayu000/ha-dashboard-layouts-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ha-dashboard-layouts-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ha-dashboard-layouts-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/ha-dashboard-layouts-2

---


# 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.

```python
{
    "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.

```python
{
    "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.

```python
# 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).

```python
{
    "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.

```python
# 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](references/sections-view.md)** - Modern drag-and-drop Sections View (HA 2024+)
- **[references/layout-card.md](references/layout-card.md)** - HACS layout-card with CSS Grid and media queries
- **[references/view-types.md](references/view-types.md)** - Masonry, Sidebar, and other view types
- **[references/responsive-patterns.md](references/responsive-patterns.md)** - Advanced mobile-first patterns

## Common Dashboard Patterns

### Temperature Gauges in Grid

```python
{
    "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

```python
{
    "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

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

## Official Documentation

- [Views - Home Assistant](https://www.home-assistant.io/dashboards/views/)
- [Grid card - Home Assistant](https://www.home-assistant.io/dashboards/grid/)