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.

[layershifter]

@kollster grid-template-areas is not a shorthand property, so you can pass it as it. While grid-area is a shorthand property we have a function for it in the latest release.

I transformed your snippet into the code below:

const useClasses = makeStyles({
  layout: {
    display: "grid",
    gridTemplateAreas: `
    "header header"
    "nav    main  "
    "footer footer"
    `
  },
  header: {
    ...shorthands.gridArea("header")
  }
});

https://codesandbox.io/s/boring-fast-3zfsdg?file=/src/App.tsx

---

Please let us know if you need additional help 🐱