how to specify grid-template with jss

Question

Take a look at this example from css-tricks:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

How can I reproduce this with jss?

Harrold

Maybe take a look at how material-ui framework implemented their grid system : github.com/mui-org/material-ui/blob/master/packages/material-ui/… – Ozonize

Old comment but React Material UI is actually using flex for their grid system, that wouldn't be helpful here. – Marsipobranch

Answer 1

In your javascript, you can add it like this

import injectSheet from 'react-jss'
....
const MyComponent = ({ classes, children }) => (
  <div className={classes.container}>
    {children}
  </div>
)
...
export default injectSheet({
    container: {
     gridTemplateAreas: `
          "header header header"
          "sidebar main main"
          "footer footer footer"
        `,
    }
})(MyComponent)

Extravagate

Answer 2

I know that my answer is going to be a little dirty. But you know JSS has the ability similar to CSS.

If the CSS property you're looking for is named grid-template-columns, then you can simply use gridTemplateColumns.

Let's just do an example.

.container {
  display: grid;
  grid-template-columns: '100px 100px 100px';
}

In JSX, you can do something like..

const Grid = (props) => {
  const style = {
    display: 'grid',
    gridTemplateColumns: [1,2,3].map(i => '100px').join(' ')
  }
  return <div style={style}></div>
}

Now above is a dirty code sample. If you want to neat it a little bit, it could be better of course! Like putting it in a useState and changing it just when it needed to be.

But the point is simple. If you want to use a CSS property, you can just replace the CSS property name with a camelCase name convention and you will be fine.

Check out styling in React's documentation to learn more. React DOM Element Style

Underdrawers

grid-template-columns is not the property I was looking for. That's quite something else than the grid-template property I wanted to use. – Harrold

@Harrold Yes, thanks for pointing that out! But I'm aware of it. I'm just providing samples of a similar problem that I just mentioned in my answer. If you want to use a CSS property, you can just replace the CSS property name with a camelCase name convention and you will be fine. – Underdrawers

I just happened to look for a certain solution to my problem with CSS Grid, and this was just part of it. – Underdrawers