# Grid and stack cards

> The grid, horizontal stack, and vertical stack cards hold other cards, to place them side by side or below each other as one card.

Source: https://contributors.home-assistant.io/design/dashboards/grid-card/

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 380px" data-props='{"config": {"type": "grid", "columns": 2, "square": false, "cards": [{"type": "button", "entity": "light.living_room_lamp"}, {"type": "button", "entity": "light.hallway"}, {"type": "button", "entity": "switch.desk_plug"}, {"type": "button", "entity": "lock.front_door"}]}}'></hui-card>
```

## Usage

These three cards have no content of their own. They hold other cards and lay them out:

- The grid card places cards in columns, row after row.
- The horizontal stack card places cards side by side, in one row.
- The vertical stack card places cards below each other.

They come from the masonry view, where every card takes one column and the view decides where it goes. A stack is the way to keep cards together there, like a heading with the cards below it, or two gauges side by side.

In the sections view, you rarely need them. A section is already a grid of 12 columns, and each card gets its own size in it. Place the cards in the section directly, so each one can be moved, resized, and hidden on its own. Reach for a stack only for cards that must stay together in every layout, on every screen.

### Grid

The grid card has three columns by default. Set `columns` to change that. By default, every cell is square, which suits small cards like the [button card](https://contributors.home-assistant.io/design/dashboards/button-card/). Set `square: false` to let each row take the height of its tallest card.

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 380px" data-props='{"config": {"type": "grid", "cards": [{"type": "button", "entity": "light.living_room_lamp"}, {"type": "button", "entity": "light.hallway"}, {"type": "button", "entity": "light.kitchen_ceiling"}]}}'></hui-card>
<hui-card style="width: 380px" data-props='{"config": {"type": "grid", "columns": 2, "square": false, "cards": [{"type": "tile", "entity": "binary_sensor.front_door"}, {"type": "tile", "entity": "lock.front_door"}, {"type": "tile", "entity": "binary_sensor.kitchen_window"}, {"type": "tile", "entity": "binary_sensor.bathroom_leak"}]}}'></hui-card>
```

### Horizontal stack

The horizontal stack divides its width evenly over its cards. Keep it to two or three cards. On a narrow screen, every card in the stack gets narrower too, because a stack never wraps.

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 380px" data-props='{"config": {"type": "horizontal-stack", "cards": [{"type": "gauge", "entity": "sensor.living_room_humidity", "name": "Inside"}, {"type": "gauge", "entity": "sensor.outdoor_humidity", "name": "Outside"}]}}'></hui-card>
```

### Vertical stack

The vertical stack puts cards below each other, as one card. Combine it with a horizontal stack to build a small layout of its own.

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 380px" data-props='{"config": {"type": "vertical-stack", "cards": [{"type": "tile", "entity": "media_player.living_room_speaker"}, {"type": "horizontal-stack", "cards": [{"type": "tile", "entity": "light.living_room_lamp"}, {"type": "tile", "entity": "climate.thermostat"}]}]}}'></hui-card>
```

### Title

All three take an optional `title`, shown above the cards. In the sections view, use a [heading card](https://contributors.home-assistant.io/design/dashboards/heading-card/) instead, so the title looks the same as the rest of the view.

### Content

- A stack in a stack in a stack is hard to edit and hard to change. If a layout needs that, a section probably fits better.
- Cards in a grid or stack keep their own borders and backgrounds. The holder adds the spacing between them, nothing else.

## Configuration

All three cards take:

- `cards` (list, required): the cards to show, each with its own configuration.
- `title` (string): a title above the cards.

The grid card also takes:

- `columns` (number): the number of columns. Defaults to `3`.
- `square` (boolean): makes every cell square. Defaults to `true`.

```yaml
type: grid
columns: 2
square: false
cards:
  - type: tile
    entity: binary_sensor.front_door
  - type: tile
    entity: lock.front_door
```

```yaml
type: horizontal-stack
cards:
  - type: gauge
    entity: sensor.living_room_humidity
  - type: gauge
    entity: sensor.outdoor_humidity
```

## In code

The cards live in [`src/panels/lovelace/cards/`](https://github.com/home-assistant/frontend/tree/dev/src/panels/lovelace/cards): `hui-grid-card.ts`, `hui-horizontal-stack-card.ts`, and `hui-vertical-stack-card.ts`. The elements are `<hui-grid-card>`, `<hui-horizontal-stack-card>`, and `<hui-vertical-stack-card>`. All three extend the shared base in `hui-stack-card.ts`, which creates a `<hui-card>` for each card in the list and renders the title. Each card only adds its own layout styles on top.

The size of a stack follows the cards in it: the vertical stack adds up their sizes, and the horizontal stack takes the largest.

[Source](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-stack-card.ts)