我想使用CSS-Grid-Layout(最好带有明确的列网格)。
并且我想要一个灵活的项目,可以吸收x轴上的任何额外空间/跨越其他项目未使用的所有列。
完美的解决方案将是一个属性,使项目跨越所有未占用的列(类似于flex属性)-但我想这在CSS-Grid中不可能。
我将尝试举个例子:
以下布局使用多个元素在网格上定位。
如果“aside1”区域的项目被切断,我希望具有灵活性的标题可以吸收右侧的任何额外空间。
在网格中...我想我需要一种方法让一个框项目吸收所有未使用的列。也许这是不可能的。
我正在尝试构建一个小型的“框架”,其中包括一个灵活的xy网格,类似于基础框架,但不那么酷(这是一个学校项目)。我想知道是否可能同时使用以下两种方式构建网格系统:
1. 网格项在x轴上吸收任何自由空间/列 - 使用flex-Grid和foundation可以实现。
2. 跨越多行的网格项- 不可能使用flex-Grid,参见:Is it possible for flex items to align tightly to the items above them? (第一个答案解释得很好)。
希望我表述得更加清晰。
.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? (第一个答案解释得很好)。
希望我表述得更加清晰。