Grid and stack cards

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.

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. Set square: false to let each row take the height of its tallest card.

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.

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.

All three take an optional title, shown above the cards. In the sections view, use a heading card instead, so the title looks the same as the rest of the view.

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

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.

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

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

The cards live in 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