CSS Grid Layout: Three rows grid

Question

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:

• The row #1 is aligned to the top of the grid and can change it's height (but has a max-height value)
• The row #3 is aligned to the bottom and can change it's height (also has a max-height value)
• So the row #2 must fill all remaining space in grid.
• The grid container should not overflow the html body.

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.

Answer 1

I see that the original question is marked as answered, but as the original included an attempt to use the CSS Grid Layout module to solve the problem, I thought I'd complement the answers with some solutions using newer standards.

Using flexbox

First of all, this kind of layout is pretty easy using flexbox. The flex-grow property allows you to define elements that fill the remaining space in this very way. JSBin example using flexbox here

Note: Not using all prefixes (e.g. to target IE10 etc) in the quick demo, but if you use something like autoprefixer it's kind of trivial. Also, beware of bugs relating to things like vh units in iOS and min-height flexbox columns in IE.

Using grid layout

Note: This demo will only work in Chrome Canary at the time the answer was written!

Grid layout is picking up pace and the spec has stabilized a bit. Chrome Canary has an implementation that is pretty far along, as does the WebKit nightly builds.

Grid layout has the same type of flexible sizing as flexbox, and moves the layout mechanism to the container element instead. JSBin demo – remember, Chrome Canary only at the time of writing. (It would work in WebKit nightlies as well with the right prefixes.)

Basically, the whole thing boils down to these lines:

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

The above means "Use the body element as a grid container, place items in it in source order, in a single column that is 100% wide, and size the first and third row according to content, and the middle one takes up all the space that is left". We don't need to specifically place the items inside the grid: they will auto-place themselves – we could change order etc if we wanted though. Grid Layout can do many more advanced things!

Most browser vendors are working on finishing their first grid implementations, so it's fun & worthwhile to start playing with it. :-) Until then, the flexbox version gets you pretty good browser support.

Answer 2

You can do this with display:table property See Spec and Compatibility

Working Demo

CSS

#container {
    display:table;
}

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

Edit:

Updated Fiddle

Added div inside table-row to prevent overflow

Answer 3

what about setting percentages heights like this:

.head{
   height:10%;
   max-height: /*max height allowed*/;
}

.content{
   height:80%;
   max-height: /*max height allowed*/;
}

.foot{
   height:10%;
   max-height: /*max height allowed*/;
}