Advanced Lovelace Dashboard Layouts: Grid, Floor Plans, and More

This post may contain affiliate links. As an Amazon Associate we earn from qualifying purchases. Disclosure.

Home Assistant dashboard customization guide

The standard Home Assistant Lovelace UI ships with a long list of card types out of the box (the Home Assistant dashboard docs list 48 of them). The auto-generated default view works for a handful of devices and turns into a long scroll once you pass a few dozen entities. If you're past that point, these techniques will fix it.

TL;DR: Advanced Lovelace layouts, grid cards for precise placement, picture-elements for floor plans, layout-card for CSS masonry, and per-user dashboards, solve clutter at scale. Everything below runs locally on current Home Assistant releases, with zero cloud dependency.

What Makes the Built-in Grid Card So Useful?

If you're still getting comfortable with the building blocks before tackling layouts, our primer on Lovelace cards breaks down what each card type does and when to reach for it. The grid card is the most underused built-in card. It lays cards out in a grid and requires zero HACS installs. You get precise column control, variable card heights, and a YAML structure that's easy to read six months later.

Here's an example for a living room view:

type: grid
columns: 3
square: false
cards:
  - type: tile
    entity: light.ceiling_main
  - type: tile
    entity: light.floor_lamp
  - type: tile
    entity: switch.tv_strip
  - type: tile
    entity: climate.living_room
  - type: tile
    entity: media_player.living_room_tv
  - type: sensor
    entity: sensor.living_room_temperature
    graph: line

That six-card grid renders three cards per row. The grid card defaults to square cards, so the square: false setting lets the climate tile grow taller than the light tiles next to it. No custom card needed. No plugin to maintain. Once the layout is solid, a good theme ties it together, so it's worth browsing the best Home Assistant themes to match the palette to your room.

Swapping nested vertical and horizontal stacks for one grid usually shortens a view, because the grid fills each row for you instead of making you count cards per stack.

How Do I Build a Floor Plan View with Picture-Elements?

The picture-elements card is the right answer for a floor plan overlay. You upload a PNG floor plan, then stack entity badges and icon buttons on top of it at pixel-precise coordinates. It's not beginner-friendly, but the result is genuinely useful.

Preparing Your Floor Plan Image

Export a floor plan from any tool, even a free one like Floorplanner works. Target something around 1600x900px and keep the file small, since a multi-megabyte image makes a tablet browser work harder on every page load.

Place the file at www/floorplan.svg inside your Home Assistant config directory. It becomes accessible at /local/floorplan.svg.

Wiring Up Entity Overlays

type: picture-elements
image: /local/floorplan.svg
elements:
  - type: state-icon
    entity: light.bedroom_ceiling
    style:
      top: 28%
      left: 22%
      "--iron-icon-fill-color": "rgba(255,200,0,0.9)"
  - type: state-icon
    entity: binary_sensor.front_door
    style:
      top: 62%
      left: 8%
  - type: state-label
    entity: sensor.living_room_temperature
    style:
      top: 44%
      left: 55%
      font-size: 12px
      color: white

Each element takes top and left as percentages of the image dimensions, so it scales across screen sizes. Getting the positions right takes trial and error.

The trick that saves the most time is to edit on a desktop first, then check on the wall tablet. Browsers and screen sizes can place percentage-positioned elements slightly differently, so always do a final check on the actual display device.

Which HACS Cards Add the Most Layout Power?

Two HACS cards lead for layout work: custom:layout-card and custom:auto-entities. Both come from the same author, Thomas Loven, and both are widely used HACS cards.

layout-card for CSS Grid and Masonry

layout-card by Thomas Loven (available in HACS) exposes full CSS grid and masonry layout to Lovelace. The masonry mode is especially good for dashboards where card heights vary a lot.

type: custom:layout-card
layout_type: masonry
layout:
  width: 300
cards:
  - type: entity
    entity: sensor.outdoor_temperature
  - type: history-graph
    entities:
      - entity: sensor.outdoor_temperature
    hours_to_show: 24
  - type: tile
    entity: light.porch

The width: 300 setting sets the column size in pixels, and the layout works out how many columns fit the available space. A wide dashboard gets several columns and a phone drops to one or two. No media queries needed.

auto-entities for Dynamic Lists

The auto-entities card builds its child card list at runtime from a filter. This is the right tool when you want "all lights that are currently on" without maintaining a static list.

type: custom:auto-entities
card:
  type: entities
  title: Lights On Right Now
filter:
  include:
    - domain: light
      state: "on"
  exclude:
    - entity_id: light.debug_*
sort:
  method: friendly_name

The entity list updates live as states change. If you turn a light off, it drops out of the card as the state changes. No automation required.

How Does the Conditional Card Work for Hiding Inactive Devices?

The conditional card wraps any other card and shows or hides it based on entity state. This is the simplest way to reduce dashboard clutter without building separate views.

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.washing_machine_running
    state: "on"
card:
  type: tile
  entity: sensor.washing_machine_remaining_time
  name: Wash Done In

That card only appears when the washing machine is actually running. When it's off, the space collapses entirely. No blank tile, no "unavailable" state hanging in the corner.

You can stack multiple conditions with AND logic. Want to show a guest mode panel only when the guest room occupancy sensor is active AND it's after 6 PM? That's two condition entries in the same conditions list.

Most Lovelace guides treat conditional cards as a cosmetic feature. They're actually a UX strategy. A dashboard with 40 cards that shows 12 at any given time feels fast and simple. The same 40 cards always visible feels broken and overwhelming. The conditional card is what separates a dashboard built for real family use from one built to impress at a demo.

Can I Set Up Different Views for Different Family Members?

Yes, and it's one of the most practical things you can do on a shared Home Assistant installation. The platform supports per-user default dashboards natively: an admin sets a system-wide default, and each user can override it.

Go to Settings > Dashboards and create a new dashboard called, for example, "Kids Panel." Set its icon and give it a dedicated sidebar position. Then have the family member open their user profile, go to the General tab and pick it as their default dashboard. An admin can set a system-wide default with "Set as default" in Settings > Dashboards.

For more granular control, use input_boolean helpers as navigation state. Create one helper per "mode" (adult view, kids view, cinema mode) and wire conditional cards to each. Flip the boolean from an automation or a dashboard button.

# input_boolean.kids_mode in configuration.yaml
input_boolean:
  kids_mode:
    name: Kids Mode
    icon: mdi:human-child

Then in the dashboard, wrap adult-only cards:

type: conditional
conditions:
  - condition: state
    entity: input_boolean.kids_mode
    state: "off"
card:
  type: tile
  entity: lock.front_door

The front door lock tile disappears entirely when kids mode is active. That's a real safety feature, not just aesthetics.

How Do You Combine Horizontal and Vertical Stacks?

Horizontal-stack and vertical-stack cards predate the grid card and still appear in most tutorials. They still work fine, but nesting them is fragile. A horizontal-stack inside a vertical-stack inside another horizontal-stack gets fragile on narrow screens, in ways that are hard to debug.

My rule: use horizontal-stack only for two or three equal-width cards. Use vertical-stack only for grouping logically related cards in a single column. Use the grid card for anything more complex. The grid card handles responsive behavior automatically; stacks don't.

The one place stacks still shine is the stack-in-card HACS card, which visually groups a stack into a single Material card with a shared header. It's free in HACS and quick to install, so it's worth having in any serious dashboard setup.

What Actually Slows Down Dashboard Performance?

Wall tablets and old Android devices expose dashboard performance problems that a desktop browser hides completely. A budget wall tablet will visibly lag once a single dashboard view renders dozens of cards, even when most are simple tiles, and a "complete home overview" with everything on one screen is the classic way to get there. Splitting it into a few smaller views is the first fix to try.

Things that slow Lovelace down on low-power devices:

• History graph cards with long time windows rendered on every page load
• Picture-elements cards with many overlaid elements on a single image
• Several auto-entities cards on one view (each evaluates its filter against your entities)
• Gauge and statistic cards that query recorded statistics each time they render
• Embedded iframe cards pointing to external URLs (network latency blocks the whole card)

The fix for most of these is the same: split one large view into two or three smaller views, or add a conditional card wrapper so expensive cards only render when actually needed. A history graph wrapped in a conditional that shows only when you tap a toggle adds zero render cost to page load.

What Should You Know Before You Start Rebuilding?

If you're starting from scratch or doing a major dashboard overhaul, a few things will save you hours of frustration.

First, turn on edit mode and add a single grid card before adding anything else. Confirm the column count and spacing work on your actual display device, not just your laptop. Layouts that look balanced on a 27-inch monitor look completely wrong on a 10-inch tablet in portrait mode.

Second, keep a config/lovelace.yaml backup before making major changes. The HA UI editor doesn't have undo beyond the session. If you accidentally delete a card with 20 nested elements, it's gone. The configuration.yaml approach with mode: yaml gives you full version control through git. Every dashboard change can be a commit. You can git diff exactly what changed between the version that worked and the one that didn't.

Third, check the Home Assistant Lovelace documentation at home-assistant.io/dashboards whenever you try a card type you haven't used before. The official docs list every supported parameter and note which HA version introduced them. Many tutorials online still show YAML syntax from 2021 that was deprecated in 2023.

Building a dashboard that works for everyone in the house takes time. Getting the picture-elements coordinates right takes patience. But once a floor plan view is dialed in, it tends to be the feature that most impresses people who've never seen Home Assistant before, and the one that makes the whole system feel intentional rather than assembled.

HACS integrations overview Getting started with Home Assistant