Leveller - Equalize Element Heights

The Problem

These tiles vary in height, making them difficult to scan visually.

The Man in the High Castle

1962
Martian Time-Slip

1964
Do Androids Dream of Electric Sheep?

1968
Ubik

1969
Flow My Tears, the Policeman Said

1974
A Scanner Darkly

1977

Try This First

Before using this plugin, see if flexbox might solve the problem.

The Man in the High Castle

1962
Martian Time-Slip

1964
Do Androids Dream of Electric Sheep?

1968
Ubik

1969
Flow My Tears, the Policeman Said

1974
A Scanner Darkly

1977

.columns, .column, .tile {
  display: flex;
}

.columns {
  flex-wrap: wrap;
}

.column, .tile {
  flex-direction: column;
}

.tile, .tile-main {
  flex: 1;
}

When All Else Fails

Maybe you inherited someone else’s code. Maybe you’re still supporting some ancient browser. Or maybe that framework everyone tweeted about last month doesn’t want to play nice with your adjustments.

In those cases, Leveller can help.

The Man in the High Castle

1962
Martian Time-Slip

1964
Do Androids Dream of Electric Sheep?

1968
Ubik

1969
Flow My Tears, the Policeman Said

1974
A Scanner Darkly

1977

var $tiles = $('#example .tile');

$tiles.leveller({
  cssSelector: '.tile-main'
});

$(window).resize(function(){
  $tiles.leveller();
});

Please level responsibly.