title: CSS Grid how to select row to add hover effect?
body: <p>I need to select a row to add a <code>hover</code> effect on it. I'm trying to wrap all cells in a row with a <code>div</code>, but all markup is destroyed. Does anyone have any idea how to do it? Is this even possible?</p>
  
  <p>Check here for full code: <a href="https://codesandbox.io/s/goofy-easley-w5rrg" rel="noreferrer">https://codesandbox.io/s/goofy-easley-w5rrg</a></p>
  
  <pre><code>const TableWrapperUI = styled.div `
    display: grid;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #dbeaf4;
    grid-template-columns: repeat(
      ${props =&gt; props.columns &amp;&amp; props.columns},
      fit-content(400px)
    );
    justify-items: center;
    padding: 5px 0;
    justify-content: space-between;
    &gt; span {
      padding: 5px;
      justify-self: left;
      :hover {
        background: #dbeaf4;
      }
    }`;
  
  const LineUI = styled.div `
    border-bottom: 1px solid #dbeaf4;
    width: 100%;
    grid-column: 1 / -1;
  `;
  </code></pre>