Css "vertical" Grid

Question

サイズ変更可能なグリッドを作成したいと思います。ドラッグ可能でソート可能なアイコン（デスクトップに似ています）が入っています。 問題は、css "float：left"を使用すると、左から右、次に上から下に向かって "水平"の塗りつぶしグリッドが表示され、上から下、左から右（また、デスクトップのような）

現状：

[ icon1 ][ icon2 ][ icon3 ] 
[ icon4 ][ icon5 ][ empty ] 
[ empty ][ empty ][ empty ] 

望ましい状態：HTMLマークアップやCSSルール上

[ icon1 ][ icon4 ][ empty ] 
[ icon2 ][ icon5 ][ empty ] 
[ icon3 ][ empty ][ empty ] 

どれsugestions？

今、コンテナdivの高さを取得するjsスクリプトがあります。アイコンのリストの高さよりも小さい場合、別のulが作成され、非表示のものが挿入されますが、それが最善の解決策だと思います。

おかげ

Aditional注：私はjQueryとjQueryのUIを使用しています、のproyectは、Google Chromeのためであるだけなので、私は、ブラウザの互換性についてはあまり心配していない、また、私はHTML5でのトラブルを持っていませんか、 CSS3のソリューションはブラウザ特有のものです。最後に、アイコンがdinamicalyとcointainerはサイズ変更可能なことができます読み込まれているので、私はアイコンが絶対的かもしれないと思います

を配置*私の英語のためのSory *

Answer 1

これは中column-widthとcolumn-gapを使用して実現できますCSS3

Answer 2

マルチカラムリストを使用してください。ここでは、jqueryを使用して複数列のリストを作成する例を示します。一度それを複数の列に置くと、必要なことをその列で行うことができるはずです。各列にクラスを適用して、すべてのliではなくその列のサイズを変更できるようにし、liをドラッグアンドドロップセクションのコンテナに設定することをお勧めします。

http://jsbin.com/ifaca/