allow using sub-grid

[ASNNetworks]

In the documentation it says: The grid layout accepts any option starting with grid- that works for a Grid Container as well as grid and place-items and place-content.

I want to create a sub-grid, but I have no way to add that variable, since it's outside of the container. Is this possible to add, or is it already possible? If so, could you tell what the correct syntax is for that since this not listed in the readme. See example of a grid with a subgrid (inside the entities-grid).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1.4fr 1.4fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    "notifications notifications notifications"
    "sidebar stats entities"
    "media stats sliders";
  width: 1280px;
  height: 800px;
}

.sidebar { grid-area: sidebar; }

.media { grid-area: media; }

.sliders { grid-area: sliders; }

.stats { grid-area: stats; }

.notifications { grid-area: notifications; }

.entities {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.6fr 1.2fr 1.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "entities-menu entities-menu entities-menu"
    "entities-cards entities-cards entities-cards"
    "entities-cards entities-cards entities-cards";
  grid-area: entities;
}

.entities-menu { grid-area: entities-menu; }

.entities-cards { grid-area: entities-cards; }

[Hankanman]

This is possible, just not implemented exactly the same as css grid, you need to think of it as a layout-card with a 'sub' layout card instead. So if we translate your example with a button card thrown in there:

type: custom:layout-card PARENT CARD IE CONTAINER
layout_type: grid
layout:
  grid-template-columns: 1fr 1fr 1fr
  grid-template-rows: 0.1fr 1.4fr 1.4fr
  gird-gap: 2px 2px
  grid-auto-flow: row
  grid-template-areas: |
    "notifications notifications notifications"
    "sidebar stats entities"
    "media stats sliders"
cards:
  - type: custom:layout-card SUB-GRID CARD
    layout_type: grid
    layout:
      grid-template-columns: 1fr 1fr 1fr
      grid-template-rows: 0.6fr 1.2fr 1.2fr
      grid-auto-flow: row
      grid-template-areas: |
        "entities-menu entities-menu entities-menu"
        "entities-cards entities-cards entities-cards"
        "entities-cards entities-cards entities-cards"
    view_layout:
      grid-area: entities
    cards:
      - type: button CARD DEFINED IN SUB-GRID
        tap_action:
          action: toggle
        entity: light.bathroom_lights
        view_layout:
          grid-area: entities-cards

[ASNNetworks]

Thanks, this works and clears up layout-card so much for me. Though I had to use a little different syntaxt to comply with the readme (layout card has been updated).

[tbrasser]

Does this really allow for the 'subgrid' behaviour where child items are placed on the parent grid? It looks like this only allows to define a grid again, within one of the parent's grid areas.

What I would like to do is to have items in a vertical-stack (or any other card that has n cards as children) lay themselves out on the grid that the vertical stack is in.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  height: calc(100vh - 42px)
  margin: -42px 4px 0 4px !important
  padding: 46px 0 0 0 !important
  reflow: true
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
  grid-gap: 0
  grid-template-rows: masonry
  grid-auto-flow: dense
  place-content: start center
  place-items: start stretch
cards:
  - type: tile  # normal card on the grid
    entity: sensor.singleton
    view_layout:
      grid-column-end: span 2

  - type: custom:auto-entities / grid / custom:grid-layout / whatever container-card
    view_layout:
      ????
    cards:  # I want these to be placed on the parent grid
      - type: tile 
        view_layout:
          ?????
      - type: tile
        etc...