Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[jss-expand] Add optional syntax for CSS grids templateAreas

See original GitHub issue

CSS grid template areas’ ascii-layout is “special” and would probably benefit from being documented.

The best way I’ve come up with to get it working involves back-tick and single quotes.

 templateAreas: `
             'head    head    head'
             'left    panel   right'
             'foot    foot    foot'`

An alternative that might be supported (and might lend itself to better dynamics) is using an array syntax:

 templateAreas: [
             'head    head    head',
             'left    panel   right',
             'foot    foot    foot']

document current syntax
add a nicer syntax to jss-expand

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

6reactions

HenriBeckcommented, Feb 10, 2019

No, there is just no better syntax than this yet:

 templateAreas: `
             'head    head    head'
             'left    panel   right'
             'foot    foot    foot'`

0reactions

GalGreenfieldcommented, Feb 10, 2019

No, not yet.

Okay, thanks for the information.

I’m new to React. If I were to want to use template-areas with a JSS component, I’d have to use it its style prop, right? Just making sure I know a workaround until this is implemented.