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

Question

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

完美的解决方案是属性，它使项目跨越所有未占用的列（类似于 flex-property）——但我想这在 CSS-Grid 中是不可能的。

我来举个例子：

以下布局使用了几个位于网格上的元素。我想要一个灵活的 header，如果区域 "aside1" 中的项目被切割，它可以吸收右侧任何额外的 space。

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

但是，当然，只要右侧有任何项目，header 就会保留在它的列中，布局将如下所示：

在 Flexbox-Layout 中，我可以使用 flex: 1 属性来完成此操作。

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

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

我想做的是构建一个小型 "framwork" 和灵活的 xy-Grid，类似于基础，但嗯.. 不是很酷（这是一个学校项目）。

而且我想知道是否有可能同时构建一个网格系统：

网格项目，吸收沿 x-axis 的任何自由 space/columns - 可能与 flex-Grid 和基础。
网格项目，跨越多行 - 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 sizes columns in the explicit grid, 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; */

这个post也可能有用：

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

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

css

grid-layout

css-grid