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

我想知道是否可以用以下两种方式构建网格系统：

网格项，吸收沿x轴的任何自由空间/列 - 可以使用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个尺寸列，{em}隐式网格中的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?

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

1 个答案: