How to use grid-template-areas in react inline style?

css reactjs css-grid
shriek picture shriek · Dec 10, 2017 · Viewed 15.3k times · Source

So, I've been playing with css-grids in react when I noticed that grid-template-areas has a bit different syntax which might not be compatible in inline react styles. I'm not using any libraries just plain old react inline styles with style prop.

So what I'm aiming to do is similar to this.

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-areas: "header header"
                       "aside main"
                       "footer footer"
}

.header {
  grid-area: header;
  border: 1px solid red;
}
.main {
  grid-area: main;
  border: 1px solid green;
} 

.aside {
  grid-area: aside
}
.footer {
  grid-area: footer;
  border: 1px solid yellow;
}

Fidde: https://jsbin.com/lejaduj/2/edit?html,css,output

The layout is simple, "header" and "footer" covering all the columns and "aside" and "main" covering the half. This is just for demo purpose so I kept it simple.
Notice particularly how grid-template-areas has multiple values separated just by double quotes.

After some thought I thought we could use arrays in gridTemplateAreas in react inline styles. That didn't seem to work.

I again tried with template-literals which didn't work either.

Sandbox: https://codesandbox.io/s/zx4nokmr5l

So, is it just me that's hitting this obstacle or is this not supported yet in react?

I'd rather not use any extra library or framework in react to achieve this as much as possible.

Answer

Chris Wingler picture Chris Wingler · Jan 18, 2018

Just use backtick strings.

gridTemplateAreas: `
                    'header header'
                    'aside main'
                    'footer footer'
                `

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More