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

Question

我想使用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{
  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构建一个小的“框架”，类似于基础，但是嗯..不那么酷（这是一个学校项目）。

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

1. 网格项，吸收沿x轴的任何自由空间/列 - 可以使用flex-Grid和基础。
2. 网格项目，跨越多行 - 使用flex-Grid无法实现，请参阅：Is it possible for flex items to align tightly to the items above them?（第一个答案很好地解释了它）

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

Answer 1

一种可能的解决方案是使用grid-template-columns作为明确大小的列，使用grid-auto-columns作为任何其他灵活列。

虽然grid-template-columns在显式网格中对列进行了大小调整，但grid-auto-columns会在隐式网格中对列进行大小调整。

所以尝试像这样调整列的大小：

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; */

这篇文章也可能有用：

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