Css ustaları bi bakabilirmisiniz

Arkadaşlar gri alanları aşağıdaki şekildeki gibi nasıl sıralatabilirim yan yana ama üste olan boşluklarda sabit bir şekilde.<article> tagıyla oluşturulmuş bölümler gri alandaki.Yardımcı olan çıkarsa çok sevinirim baya bi araştırdım bulamadım

Çözümü buldum burda örnekle anlatılmış.

Alternatif olarak;

( * ) Masonry
( * ) Responsive jQuery Masonry
( * ) Pinterest-style Columns

kullanabilirsiniz.

Xhtml Döküman
____________________

<div id="kutugenelalan ">
<div id="kutu">Metin 1</div>
<div id="kutu">Metin 2</div>
<div id="kutu">Metin 3</div>
<div id="kutu">Metin 4</div>
<div id="kutu">Metin 5</div>
<div id="kutu">Metin 6</div>
</div>



CSS döküman
__________________________________
div#kutugenelalan {
height: auto;
margin-bottom: 10px;
position: relative;
width: 1000px;
}

div#kutu{
background: none repeat scroll 0 0 #CCCCCC;
border-radius: 57px 57px 57px 57px;
float: left;
height: 375px;
margin: 5px;
position: relative;
width: 309px;
}

___________

Kolay Gelsin

Veritabanından çekmedikçe sorun yok. ancak iş resimleri veritabanından çekmeye gelince datalist kullanıyorum saçma bir görüntü söz konusu. Yapan varsa nasıl yaptığını paylaşırsa sevinirim...

Senin yapmak istediğin nedir hocam ? Konu içerisinde yazdıklarında burada anlatılmış dediğinizin arasında çok fark üst boşluk demişsiniz üstteki 3lü için diyorsanız zaten float:left ile sıraladığınız da her zaman üst boşluk aynı kalır kapsayıcı dive ne kadar boşluk verirseniz yok grid bir şekilde burada yapılmış dediğiniz yerdeki gibi olsun derseniz sabit yükseklik verdiğinizde olay çözülmüş olur zaten

Float left olayı değildi bahsettiğim css 3 ile gelen column özelliğiydi.Konu eski bir konu, ozaman aradığım cevabı bulmuştum.Üst mesajımda bahsettiğim özellikle ilgili bir link eklemiştim merak edenler için