CSS Grid Layout - Make an element as large as possible.

Question

I want to use CSS-Grid-Layout (ideally with an explicit grid of columns). And I would like to have a flexible element that absorbs any additional space along the x / axis spans as many columns as are not used by other elements.

The ideal solution is a property that makes the element span all unoccupied columns (similar to flex-property), but I think this is not possible in CSS-Grid.

I will try to make an example:

The following layout uses several elements located on a grid. I would like to have a flexible header that absorbs any extra space on the right if the object in the "on the side1" area 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 elements on the right side, the header will remain in this column, and the Layout will look like this:

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

In the Grid ... I think I need a way to have an Item field in order to absorb all the unused columns. Perhaps this is impossible 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'm trying to do is to create a small “framework” with a flexible xy-grid, similar to the base, but not .. it's not cool (this is a school project).

And I was wondering if it is possible to build a grid with both:

• Grid elements that absorb any free space / columns along the x axis - possibly using flex-grid and at the base.

• Grid elements that span multiple rows are not possible with flex-grid, see: Is it possible for bending elements to fit snugly over the elements above them? (the first answer explains this pretty well)

Hope I made myself a little clearer.

Answer 1

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

While grid-template-columns are column sizes in an explicit grid, grid-auto-columns are column sizes in an implicit grid.

So, try resizing the columns as follows:

 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 column width full width when second column does not exist?