CSS column layout with last elements' heights set equally - css

Question

I have a 3-column layout which I'm trying to show you with this paint illustration.
I want the last divs of each column to take up the remaining space (blue).
The overall height of this layout is not fix, nor the number of divs.
Some of the divs will have fix dimensions, others don't.
Is there a pure CSS solution for this?

Answer 1

The cleanest way to achieve this is to use CSS flexible boxes:
<div class="col1"> ... </div>
<div class="col2"> ... </div>
<div class="col3"> ... </div>
CSS:
body{
display: -ms-flexbox; /* ie 10 (older but working flex implementation) */
display: -webkit-flexbox;
display: flex;
min-height: 100vh; /* optional, forces minimum height to 100% of viewport */
margin: 0;
padding:0;
}
.col1, .col3{
width: 25%;
}
.col2 {
width: 50%;
}
(demo)
The markup is simple, CSS is easy to understand, no "hacks". The only disadvantage right now is the poor browser support (IE 10+). I wouldn't consider it a big one, because you can work around this in IE 9- by using javascript.
Check out "Solved by flexbox" for other uses cases.
Another good solution that I have been using for years is the "The Perfect 3 Column Liquid Layout". The CSS is clean, but a little harder to understand and HTML is a little bulky because it requires wrapper elements for each column. If you need IE 6+ support without resorting to javascript, this is probably the 2nd best choice.
There are other ways to do this:
Table layout (display:table and related properties)
Background images on the body (for solid colors CSS gradients work too)
They are explained in this article (ignore the flex box one, because it uses the old implementation with some unnecessary 99999px margin hack).
But these introduce other limitations that can outweigh the ones from the first two methods. For example, Firefox not positioning absolute elements relative to the table cell. With backgrounds this kind of positioning is not possible at all, because the columns don't have real 100% height

Answer 2

Susy might do the trick for you.
It lets you easily make responsive grids in Sass which isn't vanilla css but will compile down to it. Square Market uses susy and if you take a look at their home page, linked previously and included below, they accomplish a similar effect to what your looking for.
Heres a basic example of a responsive grid so you can get a feel for how easy it is:
// Complex AG grid, brought to you by Susy:
.ag1 { #include span-columns(2,10); }
.ag2 { #include span-columns(6,10); }
.ag3 { #include span-columns(2 omega, 10); }
.ag4 { #include span-columns(3,6); }
.ag5 { #include span-columns(3 omega,6); }
.ag6 { #include span-columns(2,6); }
.ag7 { #include span-columns(4 omega,6); }
.ag8 { #include span-columns(2,4); }
.ag9 { #include span-columns(2 omega,4); }
.ag10 { clear: both; }
Like you want, you dont have to specify the overall height of a particular column and can lock the dimensions of a particular column in.

Answer 3

This can be achieved with a combination of CSS Grid and Flexbox:
html,
body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: solid 2px gray;
padding: 12px;
height: 100%;
grid-gap: 10px;
min-height: 450px;
}
.column {
display: flex;
flex-flow: column;
}
.item {
border: solid 2px orangered;
height: 100%;
margin: 5px 0;
}
.item.fixed1 {
height: 100px;
}
.item.fixed2 {
height: 380px;
}
<div class="grid">
<div class="column">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item fixed1"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item fixed2"></div>
<div class="item"></div>
</div>