CSS column layout with last element heights set identically

Question

I have a three-column layout that I am trying to show you with this paint. I want the last divs of each column to occupy the remaining space (blue).

The total height of this layout is not fixed, nor is the number of divs. Some of the divs will have fixed sizes, others not.

Is there a clean CSS solution for this?

Answer 1

The cleanest way to achieve this is to use flexible CSS squares:

<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 )

, CSS , "". (IE 10+). , IE 9, javascript.

" flexbox" .

---

, , " 3- " . CSS , , HTML , -. IE 6+, javascript, , , .

---

:

• (display:table )
• ( CSS-)

( flex box, 99999px).

, . , Firefox . , 100%

Answer 2

.

Sass, CSS, . Square Market susy, , , , , .

, , :

// 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; }

, , .

Answer 3

This can be achieved using 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>

Run codeHide result