Question: How to use grid-template-areas?

[kollster]

I can't quite figure out how to use grid-template-areas with Griffel (using "@griffel/react": "^1.2.3",). I have looked through the documentation and shorthands with no avail.

I am trying to make the equivalent of something like this css:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main  "
    "footer footer";
}

.header {
  grid-area: header;
}

Any help on how to do this will be greatly appreciated.