Can you nest grid-layouts inside grid-layouts?

Configuration Frontend
1

I’m curious if I can nest a grid layout inside a grid layout. Picture a 3x3 grid. In row 1 column 1, I want to have another 3x3 grid. Two reasons:

  1. indepdencence – I want to create separate .yaml for the nested grid-layout so I can swap out the code by including different .yaml… Think nested 3x3 Grid A.yaml and nested 3x3 Grid B.yaml. Then I can create a condition card that will swap them depending on conditions.
  2. Cleaner code - Keeping this code in separate .yaml files stops me from having one giant 2K lines .yaml file for my dashboard.
  3. independent column control. I want the exterior r1c1 to be 1/3 of the screen but I want the interior grid to be 1fr 3fr 1fr but still all fit within the 1/3 of the screen.

I’ve tried a variety of configurations but hitting a wall so I wanted to know if it’s even possible before I beat my head against the wall too many more times.

2

Are you talking about a Sections layout view in a yaml-managed dashboard?
Each section uses a Grid card where every child card can have some grid options (number of rows/columns).
You can create a Grid card as a child card, but sub-childs cannot have those grid options (like a standalone Grid card on a masonry layout view).
Perhaps you can use a custom:layout-card with a grid layout (supporting all css grid properties) instead of the Grid card, never tried myself.
So, in general the answer is “yes, you can use a grid inside a grid”.

3

No I’m talking about an external .yaml single pane dashboard where that looks like this:

kiosk_mode:
  hide_header: true

views:
  - type: custom:grid-layout
    theme: 'LCARS TNG'
    path: default
    layout:
      #default
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: 1.5fr 1fr 1fr 8.5fr
      grid-template-rows: auto auto auto 1fr auto
      grid-template-areas: |
        "header     header     header     header"
        "scanner    systitle   options    title"
        "datapanel  sysops     controls   sysinfo"
        "datapanel  sysops     memory     sysinfo"  
        "datarows   command    sensormode starmap"

    cards:

      #################################################
      #                                               #
      #            SCANNER                            #
      #                                               #
      #################################################

      - type: custom:grid-layout
        view_layout:
          grid-area: scanner
        layout:
          display: grid
          grid-template-columns: 1fr 8fr 1fr
          grid-template-rows: 1fr 1fr 1fr
          grid-template-areas: |
            "left center right"
            "left center right"
            "left center right"
        cards:
4

If this is a yaml-mode dashboard - definitely you can use «include» for any dictionary or list.
If this is not answering your question - suggest to elaborate which part of your yaml exampl you wish to import.

BTW - what you are calling “grid layout” is a custom layout-card.
The “custom:grid-layout” may only be used for a VIEW, and cards cannot be declared as “custom:grid-layout”, they can only be “custom:layout-card” with defined grid layout. Check docs for the layout-card.