CSS网格布局 - 使一个项目跨越所需的所有列

Question

CSS网格布局 - 使一个项目跨越所需的所有列

6

我想使用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布局中，我可以使用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. 网格项在x轴上吸收任何自由空间/列 - 使用flex-Grid和foundation可以实现。

2. 跨越多行的网格项- 不可能使用flex-Grid，参见：Is it possible for flex items to align tightly to the items above them? （第一个答案解释得很好）。

希望我表述得更加清晰。

- MioMioMate

1

我希望它的行为类似于具有 flex:1 值的 flex 项和其他项具有固定宽度的 flex 项所在的行。flex:1 项占用固定项之间的所有可用空间。因此，只有在没有其他项时，它才应跨越整个行。主要想法是拥有一个灵活的网格，在其中侧面的项目可以被切除，而主要部分填充所有可用空间。并使用 CSS-Grid-Layout 来构建它。只是想知道是否可能。 - MioMioMate

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

一种可能的解决方案是使用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：当第二列不存在时如何使一列跨越整个宽度？