CODEWITHSUNDEEP
csscss-gridjss
Vegar
Vegar

Reputation: 12898

how to specify grid-template with jss

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?

Upvotes: 8

Views: 3964

Answers (2)

Irfandy J.
Irfandy J.

Reputation: 1464

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

Upvotes: 0

Lalit Yadav
Lalit Yadav

Reputation: 909

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)

Upvotes: 13

Related Questions