title: Make a grid column span the entire row
body: <p>Imagine we have <strong>2 CSS Grid containers</strong> with dynamic <strong>columns count based on width</strong>.</p>
  
  <pre><code>display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  </code></pre>
  
  <p>The grid works perfectly, but what if we need to have another grid to have the 1st column to be same as in another grid with the code shown above, but it's another column to span through more cells - depending on how many cells are in the current row.</p>
  
  <p>To better understand issue, there are images:</p>
  
  <p><a href="https://i.stack.imgur.com/ZMxIs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZMxIs.png" alt="TargetDesign"></a></p>
  
  <p>On more narrow wrapper:</p>
  
  <p><a href="https://i.stack.imgur.com/TRlbp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TRlbp.png" alt="TargetDesign2"></a></p>
  
  <p>We would need to apply something like <code>grid-column: span ALL</code> <em>(if something like that exists)</em>, with meaning that ALL = till the end of current row.</p>
  
  <p>What is really important is that "First" column should always align with "1" column.</p>
  
  <p>Code to run example is here:</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>.grid div {
    /* Not important fancy styles */
    height: 40px;
    text-align: center;
    padding-top: 20px;
  }
  
  .grid {
    width: 350px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    background-color: silver;
  }
  
  .grid-second {
    background-color: red;
  }
  
  .grid-another {
    background-color: purple;
    border: 1px solid gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="grid-first"&gt;
      First
    &lt;/div&gt;
    &lt;div class="grid-second"&gt;
      Second (Want till end)
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Another same grid --&gt;
  &lt;div class="grid"&gt;
    &lt;div class="grid-another"&gt;
      1
    &lt;/div&gt;
    &lt;div class="grid-another"&gt;
      2
    &lt;/div&gt;
    &lt;div class="grid-another"&gt;
      3
    &lt;/div&gt;
    &lt;div class="grid-another"&gt;
      4
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>PS. please <strong>do not</strong> post solutions using media query. I am interested in any (even little hacky solution), which will work without usage of media queries.</em></p>