title: How do you use CSS grid layouts with React effectively?
body: <p>I'm currently building a Single Page Application using ReactJs and CSS grid layouts for the placement and styling of components.</p>
  
  <p>However, the two technologies don't feel like they go together well: CSS grid layouts can only (easily) be applied to children elements (grid items) of the parent container. But the very nature of ReactJS means components with grand-children components and even great-grand-children are common. </p>
  
  <p>As an example: </p>
  
  <p>React component tree: App > ToDoList > ToDo Item > Details...</p>
  
  <p>If, onClick, I want to move the 'ToDo Item' to grid-row: 1 of the 'App' component it seems the only way to do so is for ToDoList to itself be a grid of the entire App component. This then causes layout issues of other elements on the page. </p>
  
  <p>Am I right in thinking these two approaches don't play well together, or is it a flaw in my understanding of the two technologies?</p>