Menu
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?
482
The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property. Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.
The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
You can implement the CSS gird row property using grid-template-row , like this: grid-template-row: 50px 50px; The code above shows that we have a total of two rows and those two rows are 50px high. Note that we can also assign the column and row property to our HTML code at once by simply using gird-template .
The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid. The values of grid-template-rows are space-separated, where each value represents the height of the row.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With