CSS Kullanarak Pinterest Tarzı Site Yapmak

Ünlü sosyal ağ sitesi Pinterest’i bir çok kişi duymuştur.Pinleme kavramına öncülük eden bu site panolar aracılığı ile çeşitli görsel içerik sunar.Pinterest 70 milyonun üzerinde üyesi ile özellikle bayanlar arasında oldukça popüler bir sosyal ağ.Tabi ki web tasarımcılar arasında bir de sitenin tasarım oldukça popüler diyebiliriz.Pinterest tarzı dediğimiz sitenin yerleşik düzeni, panoların grid yani ızgara sistemi gibi düzenli değilde,panoların boyutlarına göre girintili çıkıntılı bir yapı oluşturuyor.Bu yapı siteye oldukça farklı bir doku kazandırıyor.

Belirtiğim gibi web tasarımcılar arasında da oldukça popüler olan bu yerleşim düzeni, genellikle jQuery ile oluşturuluyor.Bunun için popüler bir de jQuery eklentisi bulunmakta.Buradaki kullanışlı jQuery eklentileri yazımda bahsetmiştim.Bir de bu eklentiye CSS column özelliği kullanan Salvattore alternatifi var.

Ben de bu yerleşim düzenini CSS’in yeni ve güçlü özelliklerinden flex ile yapmayı düşündüm.Ama flex özellikleri buna izin vermedi.Şimdilik Pinterest tarzı bir yerleşim oluşturmak istiyorsanız ya javascript ile kendiniz oluşturacaksınız,ya internette bulunan jQuery eklentilerinden birini kullanacaksınız yada ben sadece CSS kullanmak istiyorum diyorsanız o zaman CSS’in column özelliğinine kullanacaksınız.Seçim sizin.

Ben column özelliği kullanarak örnek bir demo oluşturdum.Aşağıya da HTML ve CSS kodlarını eklendim.İçerikleri basit tutmak için sadece yazı kullandım.

CSS’in column özelliğinin tarayıcı desteği oldukça iyi ama Cheome,Firefox,Safari tarayıcılarıda ek(pre-fix) kullanmak zorundasınız.Internet Explorer ise 10 ve üzeri için destekliyor.

HMTL Kodları

<div class="container">
    <div class="box-wrapper">
        <div class="box">
            <p>Box 1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium eveniet laborum. Harum impedit, totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum totam, unde, impedit ea accusamus vitae excepturi error aliquid voluptatem, expedita sint laboriosam perspiciatis delectus possimus. Tempore nemo eos, harum. Aliquid! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ex aliquam, reiciendis ratione explicabo ad eos, ipsam iste itaque asperiores consectetur incidunt placeat rem commodi quos quis, aspernatur molestiae repellendus.</p>
        </div>
        <div class="box">        
            <p> Box 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium ev
        </div>
        <div class="box">        
            <p> Box 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium ev
        </div>
        <div class="box">        
            <p> Box 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium ev
        </div>
        <div class="box">        
            <p> Box 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium ev
        </div>
        <div class="box">        
            <p> Box 6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium ev
        </div>
        <div class="box">        
            <p> Box 7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates excepturi aperiam neque quas, blanditiis itaque minima ad molestias odit quod in aspernatur distinctio tempora laudantium ev
        </div>
    </div>
</div>

CSS Kodları

.container {
    width: 90%;
    margin: 10px auto;
}
.box-wrapper {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
   column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}
.box {    
    display: inline-block;
    padding: 10px;
    margin-bottom: 10px;
    -webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
    background: #f2f2f2;
    border: 2px solid #fefefe;
    box-shadow: 0 1px 2px rgba(12, 12, 12, 0.5);
    -
}
Bunları da beğenebilirsin