title: CSS Grid Layout - Make an item span as many column as needed
body: <p>I want to use a CSS-Grid-Layout (ideally with an explicit column-grid).
  And I would like to have a flexible item that absorbs any extra space along the x axis / spans as many columns as are not used by other items. </p>
  
  <p>The perfect solution would be a property that makes an item span across all unoccupied columns (similar to the flex-property) - but I guess that's not possible in a CSS-Grid. </p>
  
  <p>I'll try to make an example:</p>
  
  <p>The following Layout uses several elements that are positioned  on a grid.
  I would like to have a flexible header, that absorbs any extra space on the right if the item in the area "aside1" is cut. </p>
  
  <pre><code>.grid{
    display: grid;
    grid-template-columns:  none  1fr    1fr    none;
    grid-template-areas:  "header header header aside1"
                        "nav    main   main   aside2"
                        "nav    main   main   aside3"
                        ;
  } 
  
  header {
  grid-area: header;
  }
  
  main {
   grid-area: main;
  }
  
  nav {
   grid-area: nav;
  }
  
  .aside1 {
   grid-area: aside1;
  }
  
  .aside2 {
   grid-area: aside2;
  }
  
  .aside3 {
   grid-area: aside3;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/roH2T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/roH2T.png" alt="enter image description here"></a></p>
  
  <p>But, of course, as long as there are any items on the right side, the header will stay in it's column an the Layout will look like this: </p>
  
  <p><a href="https://i.stack.imgur.com/KDMSM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KDMSM.png" alt="enter image description here"></a></p>
  
  <p>In a Flexbox-Layout I could use the flex: 1 property to accomplish this.</p>
  
  <p>In Grid... I guess I would need a way to have a box Item to absorb all unused columns. Maybe that is not possible to do.</p>
  
  <pre><code>.grid{
    display: grid;
    grid-template-columns:  none  1fr   none;
  } 
  
  header {
    grid-column: 1 / ????; 
    grid-row: 1 / 2;
  }
  
  main {
    grid-column: 2 / 3; 
    grid-row: 1 / 2;
  }
  
  nav {
    grid-column: 2 / 3; 
    grid-row: 1 / 2;
  }
  
  .aside1 {
    grid-column: 2 / 3;
    grid-row: 1 /  2;
  }
  
  .aside2 {
    grid-column: 2 / 3;
    grid-row: 2 /  3;
  }
  
  .aside3 {
    grid-column: 2 / 3;
    grid-row: 3 /  4;
  }
  </code></pre>
  
  <p>What I am trying to do ist to build a small "framwork" with a flexible xy-Grid, similar to foundation, but um.. not that cool (it's a school project).    </p>
  
  <p>And I was wondering if it's possible to build a grid system with both: </p>
  
  <ol>
  <li><p>Grid Items, that absorb any free space/columns along the x-axis - possible with flex-Grid and in foundation.   </p></li>
  <li><p>Grid items, that span several rows - not possible with flex-Grid, see: <a href="https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them">Is it possible for flex items to align tightly to the items above them?</a> (the first answer explains it pretty well)</p></li>
  </ol>
  
  <p>I hope I made myself a little bit more clear. </p>