CSS 网格布局 - 使项目跨度尽可能多的列

Question

我想使用 CSS-Grid-Layout（最好使用明确的列网格）。 而且我想要一个灵活的项目，它可以吸收沿 x 轴的任何额外空间/跨越与其他项目未使用的列一样多的列。

完美的解决方案是让一个项目跨越所有未占用的列的属性（类似于 flex-property）——但我想这在 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 网格构建一个小型“框架”，类似于基础，但嗯.. 不是很酷（这是一个学校项目）。

我想知道是否可以同时构建一个网格系统：

1. Grid 项目，吸收沿 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?