Problem with the grid layout-card

Hello all,

I tried for several days to just make a grid with few buttons and slider.
I read many topics and tutos but I didn’t understand why my grids didn’t work, i really not see where s my fault :

Here s my code :

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  grid-template-areas: |
    "header header"
    "a1 b2"
    "c1 d1"
    "footer footer"
cards:
  - type: markdown
    content: test
    view_layout:
      grid_areas: header
  - type: markdown
    content: test
    view_layout:
      grid_areas: a1
  - type: markdown
    content: test
    view_layout:
      grid_areas: b2
  - type: markdown
    content: test
    view_layout:
      grid_areas: c1
  - type: markdown
    content: test
    view_layout:
      grid_areas: d1
  - type: markdown
    content: test
    view_layout:
      grid_areas: footer

And see the result :

If someone can help my i’ll be really gratefull

Thx !!
Flammz

You should use grid-areas for definition of grid, but for actual placement of cards in cells you should use grid-area… without ‘s’

Rofllll, thank a lot dear fellow !! I was breaking down triing things :')

1 Like