Genelde  bu tür örnekler grid adı altında yayınlanır. Kimileri farklı olsun diye kelimenin başına yada  sonuna kişisel imza  gibi farklı  sözcükler ekleyerek yayınlar. Ama bu seferki geliştirici biraz farklı yol izlemiş gibi görünüyor.  Florian Ferbach tarafından geliştirilmiş olan Bricks yani tuğla (veya briket de diyebiliriz )  uygulaması  web site içeriğini  bütün tarayıcılara  uygun bir şekilde  adeta jilet gibi  listeliyor.

Bu tür uygulamalar websayfasındaki dağınıklığı  toplayıp bir  düzene sokmak amacıyla kullanılır. Kimi çerçeceler büyük  kimisi  küçük olunca  web sayfasında  düzgün bir  görünüm elde  etmek pek  kolay  değildir. İşte bu noktada  yardımımıza koşan grid uygulamalarıdır.

İlla  bir css  çerçeve olması gerekmiyor. Websayfanıza yerleştirmiş olduğunuz farklı ebatlardaki resimleri de  düzene sokmak için kullanılabilirsiniz bu tür çalışmaları. Diğer  eklentilere pek dikkat etmedim ama Bricks’de  web sayfanızdaki nesneler  tarayıcı boyutuna  göre bir  oran dahilinde sıralanıyorlar. Farklı farklı ebatlardaki resimlerinizi Bricks ile beraber  web sayfanıza eklediğinizde resimler web sayfasında düzgün görüntülenecek şekilde sıralanır.

Demo sayfasında tarayıcıyı küçülttüğünüzde eklenti Bricks uygulaması içeriklerin boyutlarını ve sıralamalarını da dinamik olarak değiştirmiyor.  Demo sayfasında tarayıcı boyutunu sürekli değiştirerek  sayfayı yenilerseniz eğer Bricks’in  tam olarak ne görev gördüğünü daha iyi anlayabilirsiniz. İşin güzel tarafı her tarayıcı için ayrı ayrı tema oluşturmanıza gerek kalmayacak. Tek bir tema ile bütün cihazlar üzerinden düzgün görüntü elde etmenize olanak sağlar.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js  dosya adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-bricks.min.js"></script>

 JavaScript : 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#container').bricks();
});//]]>  
</script>

 Css : 

body {
    background-color:#AAA;
}
#container {
    font-size:0px;
}
#container img {
    margin:5px;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="container">
    <img src="https://placehold.it/225x300" />
    <img src="https://placehold.it/400x300" />
    <img src="https://placehold.it/317x400" />
    <img src="https://placehold.it/275x300" />
    <img src="https://placehold.it/127x300" />
    <img src="https://placehold.it/275x300" />
    <img src="https://placehold.it/127x300" />
    <img src="https://placehold.it/600x300" />
    <img src="https://placehold.it/317x300" />
    <img src="https://placehold.it/275x300" />
    <img src="https://placehold.it/95x300" />
    <img src="https://placehold.it/300x300" />
    <img src="https://placehold.it/275x300" />
    <img src="https://placehold.it/127x300" />
    <img src="https://placehold.it/375x300" />
    <img src="https://placehold.it/200x300" />
</div>