Как я могу плавать элементы с разным размером в плитке

Вопрос прост. У меня есть куча элементов, которые собираются сделать плитку. Однако некоторые из них имеют более высокую высоту; пусть говорят в два раза больше, чем другие. Я хочу, чтобы все они совпадали в плитке, просто используя стильный CSS-стиль.

Вот что у меня есть:

И это то, что я хочу:

Вот мой код:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    box-shadow: 0 0 1px black inset;
    width: 100px;
    display: inline-block;
}
#d1,
#d2,
#d4,
#d5,
#d6,
#d8,
#d9{
    height: 100px;
    background-color: yellow;
}
#d7,
#d3{
    height: 200px;
    background-color: red;
}
</style>
</head>
<body>
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div>
</body>
</html>

И вы можете попробовать его в прямом эфире на JSBin: http://jsbin.com/usovek/1/edit

Примечания:

Содержимое динамическое
Количество ящиков может меняться
Любой ящик может быть длиннее. И, возможно, более широкий.
Ширина или высота ящиков всегда - это количество единиц. Единица в этом примере - 50, а некоторые - 50, некоторые другие - 100 пикселей. Но было бы идеально, если бы проблема была решена для любого количества единиц (1,2,3... 50px, 100px, 150px,...)

Ответ 1