CSS Grid Layout: Three-Row Grid

Question

I am curious if Grid Layout CSS can be used to create such a thing:

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

Thus, the grid should fill the full growth. There are also some restrictions for other elements:

• Line # 1 is aligned at the top of the grid and can change its height (but it has a max-height value)
• Line number 3 is aligned with the bottom and can change its height (also has a maximum height value).
• So, line # 2 should fill in all the remaining space in the grid.
• The mesh container should not overflow the html body.

Here is an example that I have achieved: 3-line grid . I can also do everything with an absolute position like this , but not use it there, because I can automatically calculate the fields of line No. 2 without any imperative js code.

Answer 1

You can do this using the 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 2

I see that the original question is marked as the answer, but since the source included an attempt to use the CSS Grid layout module to solve the problem, I thought that I would supplement the answers with some solutions using newer standards.

Using flexbox

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

Note. Do not use all the prefixes (for example, to run IE10, etc.) in a quick demo, but if you use something like autoprefixer, this is just trivial. Also, beware of bugs related to things like vh units in iOS and min-height flexbox in IE .

Using grid layout

Note. This demo will only work in Chrome Canary at the time of writing the answer!

The grid layout is gaining momentum, and the specification has stabilized a bit. Chrome Canary has an implementation that is quite distant, like WebKit, a nightly build.

The grid layout has the same type of flexible size as flexbox, and instead moves the layout mechanism to the container element. JSBin demo - remember, Chrome Canary only at the time of writing. (He will work in WebKit nightclubs, as well as with the correct prefixes.)

Basically, it all boils down to the following 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 mesh container, place the elements in it in source order in one column with a width of 100% and the size of the first and third row according to the contents, and the middle - the remaining space." We do not need to specifically place elements inside the grid: they will be automatically placed - we can change the order, etc., if we want. A grid layout can do a lot more advanced things!

Most browser providers are working on completing their first grid implementations, so it's fun and useful to start playing with it. :-) Until then, the flexbox version allows you to get good browser support.

Answer 3

how about setting such heights as:

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