title: Why are only some of my CSS Grid boxes expanding when I hover over them?
body: <p>I'm new to grids in CSS but I want to give it a try. I have a grid with 3x3 boxes. When I hover over a box it should should out the complete row... but that's not working. </p>
  
  <p>When I hover over <code>1</code> it fills out the screen completely, and when I hover over <code>3</code> my screen starts to blink and it's not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: repeat(3, minmax(100px, auto));
  }
  
  [class^="item"] {
    text-align: center;
    box-sizing: border-box;
    padding: 10%;
    font-size: 5em;
    color: #0580d5;
    transition: .2s;
  }
  
  [class^="item"]:hover {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  
  .item-1 {
    /*grid-area: 1 / 2 / span 2 / span 2;*/
  }
  
  .container&gt;div {
    border: 2px solid #0580d5;
    background-color: rgba(40, 180, 240, .3);
    border-radius: 5px;
  }
  
  @media only screen and (min-width: 789px) {
    .container {
      grid-template-columns: repeat(3, 1fr);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="item-1"&gt;1&lt;/div&gt;
    &lt;div class="item-2"&gt;2&lt;/div&gt;
    &lt;div class="item-3"&gt;3&lt;/div&gt;
    &lt;div class="item-4"&gt;4&lt;/div&gt;
    &lt;div class="item-5"&gt;5&lt;/div&gt;
    &lt;div class="item-6"&gt;6&lt;/div&gt;
    &lt;div class="item-7"&gt;7&lt;/div&gt;
    &lt;div class="item-8"&gt;8&lt;/div&gt;
    &lt;div class="item-9"&gt;9&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>