CSS column layout with last elements' heights set equally

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? layout example

user_818326 · Answer

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

CSS column layout with last elements' heights set equally

3 Answers