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中...我想我需要一種方法來使用一個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建立一個小的“框架”，類似於基礎，但是嗯......不是很酷（這是一個學校項目）。

我想知道是否有可能建立一個兩個網格系統：

1. 網格項，吸收沿x軸的任何自由空間/列 - 可以使用flex-Grid和基礎。

2. 網格項目跨越多行 - 使用flex-Grid無法實現，請參閱： Flex項目是否可以與其上方的項目緊密對齊？ （第一個答案很好地解釋了）

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

Answer 1

一種可能的解決方案是為明確大小的列使用grid-template-columns ，為任何其他靈活列使用grid-auto-columns columns。

雖然grid-template-columns對顯式網格中grid-auto-columns大小調整，但grid-auto-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：當第二列不存在時，如何使列跨度全寬？