Grid-template-areas breaks

Configuration Frontend
1

Hi friends.
On several occasions I tried to create a grid every time I change something breaks. I’m sure I understand how to put it together but I don’t know how to fix it.
If I have 3 columns and 4 rows and they are proportional this should be the configuration, but if I repeat an element it breaks.

    styles:
      grid:
        - grid-template-areas: |
            "icon  icon"
            "icon  icon"
            "s     s"
            "s     s"
        - grid-template-columns: repeat(3, 1fr)
        - grid-template-rows: repeat(4, 1fr)
        - align-items: start

Correct example

  styles:
    grid:
      - grid-template-areas: |
          "icon  icon"
          "icon  icon"
          "n     n"
          "s     s"
      - grid-template-columns: repeat(2, 1fr)
      - grid-template-rows: auto repeat(3, min-content)
      - align-items: start

1

Wrong example

  styles:
    grid:
      - grid-template-areas: |
          "icon  icon"
          "icon  icon"
          "s     s"
          "s     s"
      - grid-template-columns: repeat(2, 1fr)
      - grid-template-rows: auto repeat(3, min-content)
      - align-items: start

2