layout-card

The Vertical layout places cards into the same column as the previous card, effectively stacking them vertically within columns.

To control placement, use the view_layout option on individual cards:

• column: Specifies which column to place the card in. Subsequent cards will follow into the same column.

A layout-break card can be used to force the next card to start in the next column.

The Horizontal layout places cards into columns sequentially, looping back to the first column when the maximum number of columns is reached.

To control placement, use the view_layout option on individual cards:

• column: Specifies which column to place the card in. Subsequent cards will follow into the next column.

A layout-break card can be used to force the next card to start in the first column.

The Masonry layout imitates the default Home Assistant Lovelace layout. Cards are assigned a height based on their content. One height unit is approximately 50 pixels.

When placing cards:

1. The layout attempts to place the card in the first column that has a total height of less than the min_height threshold.
2. If no such column exists, it places the card in the shortest column.

Specific Masonry option:

• min_height: The minimum number of card height units in a column before the next column is considered (default: 5).

layout_type: masonry

You can change how cards are arranged in a view by selecting a specific layout type. layout-card provides four new view layouts:

• custom:masonry-layout: Masonry layout.
• custom:horizontal-layout: Horizontal layout.
• custom:vertical-layout: Vertical layout.
• custom:grid-layout: Grid layout.

These can be configured via the GUI or directly in your Lovelace YAML configuration using the type and layout keys.

views:
  - title: Home
    type: custom:masonry-layout
    layout:
      width: 300
      max_cols: 10
    cards: ...

To install layout-card, follow the instructions in the Lovelace Plugins guide. Once installed, you can apply it to a Lovelace view via the Dashboard GUI:

1. Go to a Lovelace view and select Edit Dashboard.
2. Click the pencil symbol next to the view name to open view properties.
3. Select a layout type (e.g., Masonry (layout-card)) from the View type dropdown list.
4. Click Save.

The horizontal-layout allows you to arrange cards in a horizontal sequence across columns. It uses a round-robin distribution logic where cards are placed into columns one by one.

To control which column a specific card is placed in, you can use the column property within the view_layout configuration of an individual card. This allows you to override the default sequential placement and force a card into a specific column index (1-based).

The layout_type option defines the underlying Home Assistant view type used to arrange the cards.

• Standard types: Use names like masonry, grid, horizontal, or vertical. The card internally ensures these are treated as layout elements (e.g., masonry becomes hui-masonry-view or similar depending on context).
• Custom types: If you have a custom layout element, you can use the custom: prefix (e.g., custom:my-special-layout). The card will strip the custom: prefix and append -layout to resolve the element name.

You can control the visibility of individual cards within a grid-layout using the view_layout.show.mediaquery configuration. If the provided media query matches the current viewport, the card is shown; otherwise, it is hidden (unless the Lovelace dashboard is in editMode).

This is useful for creating responsive dashboards where certain cards only appear on mobile or desktop views.

The lovelace-layout-card package provides several custom layout elements for Home Assistant Lovelace dashboards. By importing the package (or installing it via your package manager), the following custom elements are registered in the browser environment:

• layout-card: The primary card used to wrap other cards in a specific layout.
• layout-break: A card used to force a layout break (e.g., in a horizontal layout).
• masonry-layout: A masonry-style layout.
• horizontal-layout: A layout that arranges cards horizontally.
• vertical-layout: A layout that arranges cards vertically.
• grid-layout: A layout based on a grid system.

Note: The package also includes patches for hui-card-element-editor and hui-view-editor to enhance the dashboard editing experience.

You can use layout-card as a wrapper for cards generated by auto-entities or entity-filter. This allows you to dynamically populate a specific layout (like Masonry) with a filtered list of entities.

To do this, set the card option in your auto-entities configuration to a custom:layout-card and specify the layout_type.

- type: 'custom:auto-entities'
  filter:
    include:
      - domain: light
        options:
          type: light
      - domain: sensor
  exclude: []
  card:
    type: 'custom:layout-card'
    cards: []
    layout_type: masonry