React

HTML

<div id="app"></div>

SCSS

.test-grid {
  background-color: palegoldenrod;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 10vh;
  min-width: 100vw;
  border: dotted red 1px;
  

  > header {
    background: #18A4E0;
    grid-column: 1/4;
  }

  > .content {
    min-height: 10rem;
    border: dashed grey 1px;
    grid-row: 2;
    grid-column: 3;
  }
  
  > aside {
    background: #ff7b006b;
    grid-column: 4;
    grid-row: 1/4;
  }
  
  > footer {
    background: #22ff006b;
    grid-column: 1/-1;
    grid-row: 3;
  }
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
      <main className="test-grid">
        <header> header </header>
        <div className="content">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </div>
        <aside>overlap sidebar</aside>
        <footer>footer</footer>
      </main>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))