CSS Grid Layout - Make an item span as many column as needed

Question

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.

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.

I'll try to make an example:

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.

.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;
}

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:

In a Flexbox-Layout I could use the flex: 1 property to accomplish this.

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.

.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;
}

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).

And I was wondering if it's possible to build a grid system with both:

1. Grid Items, that absorb any free space/columns along the x-axis - possible with flex-Grid and in foundation.

2. Grid items, that span several rows - not possible with flex-Grid, see: Is it possible for flex items to align tightly to the items above them? (the first answer explains it pretty well)

I hope I made myself a little bit more clear.

Answer 1

One possible solution would be to use grid-template-columns for your explicitly sized columns and grid-auto-columns for any additional flexible columns.

While grid-template-columns sizes columns in the explicit grid, grid-auto-columns sizes columns in the implicit grid.

So try sizing your columns like this:

grid-template-columns: 100px 100px  /* sizes the first two columns */
grid-auto-columns:  1fr             /* distributes free space among additional columns; if
                                       there is only one column, it consumes all space; */

This post may also be useful:

• CSS Grid: How to make a column span full width when a second column is not there?