CSS网格布局：三行网格 [英] CSS Grid Layout: Three rows grid

问题描述

我很好奇，可以使用网格布局CSS创建这样的事情：

I'm curious is it possible to use the Grid Layout CSS to create such thing:

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

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

So the grid must fill the full body height. And there's also some restrictions for other elements:

• 行＃1与网格顶部对齐，可以更改
  高度（但有一个最大高度值）


• 第3行与
  底部对齐，可以更改其高度（也有一个最大高度值） / li>
  
• 因此，第2行必须填满网格中的所有剩余空间。


• 网格容器不应溢出html体。

我有一个例子： 3行网格布局。
我也可以使绝对位置的一切喜欢这个，但没有用，因为我可以自动

There's an example what I achieved: 3 row grid layout. I also can make everything with absolute position like this but there's no use because I can automatically calculate the row #2 margins without any imperative js code.

推荐答案

可以使用 display：表属性请参阅规格和兼容性

工作演示

Working Demo

CSS

#container {
    display:table;
}

#head, #content, #foot {
    display:table-row;
}

编辑：

更新小提琴

Updated Fiddle

在中添加 div 表格行以防止 overflow

这篇关于CSS网格布局：三行网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！