CSS сетка квадратов, выложенных в столбцах, а не в строках

Question

В настоящее время у меня есть сетка, созданная из квадратных DIV (200xx 200px каждый).

Я начал в левом верхнем углу и плавал каждый влево так, что второй справа от первого, третий справа от этого и так далее. Когда в контейнере заканчивается горизонтальное пространство, следующий квадрат, очевидно, автоматически начинает новую строку.

Это замечательно, если вы хотите, чтобы сетка продолжала увеличиваться по вертикали каждый раз, когда заполняется ряд, но я хочу, чтобы мой был на три квадрата высотой и увеличивался с правой стороны, поэтому первый квадрат идет вверху слева, 2-й под ним, третий под этим, а затем (поскольку контейнер имеет высоту 600 пикселей), 4-й квадрат должен начинать новый столбец и идти справа от первого.

Возможно ли достичь этого для неопределенного числа квадратов, чтобы он просто продолжал расти в новые столбцы, не прибегая к JavaScript?

Поддержка IE6 не требуется.

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете попробовать несколько столбцов CSS 3 http://www.w3.org/TR/css3-multicol/, http://www.css3.info/preview/multi-column-layout/

Использование таких свойств, как

-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

http://jsfiddle.net/Txgnk/1/

Похоже, IE 10 - первый IE, который его поддерживает http://caniuse.com/multicolumn

Answer 2

Попробуйте,

<style>
.parent {
  height:600px;
  white-space: nowrap;       
}

.child {
  width: 200px;
  height: 600px;
  display:inline-block;       
}

.grand-child {
  width: 200px;
  height: 200px;
  border: 1px solid;
}
</style>

<div class="parent">
  <div class="child">
    <div class="grand-child"></div>
    <div class="grand-child"></div>
    <div class="grand-child"></div>
  </div>
  <div class="child">
    <div class="grand-child"></div>
    <div class="grand-child"></div>
    <div class="grand-child"></div>
  </div>
  ...
  ...
</div>