CSS网格布局-根据需要使项目跨越多列

我想使用CSS-Grid-Layout(理想情况下使用显式列网格).我希望有一个灵活的项目,沿x轴吸收任何额外的空间/跨越尽可能多的其他项目使用的列.

完美的解决方案是使项目跨越所有未占用的列(类似于flex属性)的属性 - 但我想这在CSS-Grid中是不可能的.

我会试着举个例子:

以下布局使用位于网格上的多个元素.我希望有一个灵活的标题,如果区域"aside1"中的项目被剪切,它会吸收右侧的任何额外空间.

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

但是,当然,只要右侧有任何项目,标题将保留在其列中,布局将如下所示:

在Flexbox-Layout中,我可以使用flex:1属性来完成此任务.

在Grid中...我想我需要一种方法来使用一个Box来吸收所有未使用的列.也许这是不可能的.

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

我想要做的是用一个灵活的xy-Grid建立一个小的"框架",类似于基础,但是嗯......不是很酷(这是一个学校项目).

我想知道是否有可能建立一个两个网格系统:

网格项,吸收沿x轴的任何自由空间/列 - 可以使用flex-Grid和基础.

网格项目跨越多行 - 使用flex-Grid无法实现,请参阅:Flex项目是否可以与其上方的项目紧密对齐？(第一个答案很好地解释了)

我希望我能让自己更清楚一些.