CSS网格布局:三行网格

Question

我很好奇是否可以使用Grid Layout CSS来创建这样的东西:

************************
*        row #1        *
************************
*                      *
*                      *
*        row #2        *
*                      *
*                      *
************************
*        row #3        *
************************

因此,网格必须填满整个身高.其他元素也有一些限制:

• 第一行与网格顶部对齐,可以改变它的高度(但是有一个最大高度值)
• 第3行与底部对齐,可以改变它的高度(也有最大高度值)
• 因此第2行必须填充网格中的所有剩余空间.
• 网格容器不应该溢出html主体.

我有一个例子:3行网格布局.我还可以用绝对的位置都这样,但有没有用,因为我可以自动计算出列#2的利润没有任何必要的js代码.

Answer 1

我看到原始问题被标记为已回答,但由于原始问题包括尝试使用CSS网格布局模块来解决问题,我认为我会使用更新的标准来补充一些解决方案的答案.

使用flexbox

首先,使用flexbox这种布局非常简单.该flex-grow属性允许您以这种方式定义填充剩余空间的元素.这里使用flexbox的JSBin示例

注意:在快速演示中不使用所有前缀(例如,目标IE10等),但如果你使用像autoprefixer这样的东西,那就有点琐碎了.另外,要注意与iOS中的vh单元和IE中的min-height flexbox列等相关的错误.

使用网格布局

注意:此演示仅在撰写答案时在Chrome Canary中有效!

网格布局正在加快步伐,规范已经稳定了一些.Chrome Canary的实现非常接近,WebKit每晚构建都是如此.

网格布局与flexbox具有相同类型的灵活大小,并将布局机制移动到容器元素.JSBin演示 - 请记住,Chrome Canary仅在撰写本文时.(它可以在WebKit中使用,也可以使用正确的前缀.)

基本上,整个事情归结为以下几点:

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  height: 100vh;
}

上面的意思是"将body元素用作网格容器,按源顺序将项目放在其中,在100%宽的单个列中,根据内容调整第一行和第三行的大小,中间的一行占用所有留下的空间".我们不需要专门将项目放置在网格中:它们将自动放置自己 - 如果我们想要的话,我们可以更改订单等.网格布局可以做更多高级的事情!

大多数浏览器供应商正在努力完成他们的第一个网格实现,因此开始使用它是有趣且值得的.:-)在此之前,flexbox版本为您提供了非常好的浏览器支持.