title: Hover each row in nested grid from parent grid
body: <p>I would like to make a <code>hover</code> on each row from nested grid in grid which the template is rendered by columns instead of rows.</p>
  
  <p>The structure looks like:</p>
  
  <ul>
  <li>Grid
  
  <ul>
  <li>Column 
  
  <ul>
  <li>Column is display grid with only rows</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>Here is a <a href="https://jsfiddle.net/Lzsjhc8k/11/" rel="nofollow noreferrer">jsfiddle</a> with a structure. I did only hover on nested row. I know that I could reverse div structure, but cannot. I do have many dependencies on columns: resizing, drag and drops -> rendering it in row way would decrease my performances which I would rly avoid.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>When we hover on div element which is child of the <code>grid-wrapper__nested</code> I would like to hover <strong>each</strong> div on same row in each <code>grid-wrapper__nested</code>.</p>
  
  <p>Vizualization:</p>
  
  <p><a href="https://i.stack.imgur.com/FUsnA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FUsnA.png" alt="Effect"></a></p>