Sadece Css ile Pinterest Grid(Layout) Sistemi Oluşturma

Merhabalar,

Evet bu benim ilk yazım ve bu yazımda size pinterestteki grid sistemini oluşturmayı anlatacağım. Ondan önce neden normal grid sistemi ile bu yapıyı oluşturamayacağıma bakalım mı?

Neden Normal Grid İşimize Yaramıyor?

İşimize yaramıyor derken elbette işimize yarıyor fakat istediğimiz düzeni vermede birazcık kalıplara takılıyoruz. İşte bunu esnekleştirmek gerek diye düşünüyorum.

Css ile yaptığımız grid sistemi default olarak şu şekilde gözükecektir.

Ama biz bu görüntüyü aşağıdaki yapı ile değiştirmek istiyoruz.

Yukarıdaki kutucukların her birine box diyelim. Biz her bir box bitince altında yeni bir box oluşsun istiyoruz. Fakat default grid o satırdaki en uzun elemente göre bir yükseklik belirliyor ve ikinci satır o yükseklikten hemen sonra başlıyor. Bunu şu şekilde düzelteceğiz.

Kodlamaya Başlayalım :)

Başta size mantığını anlatmam gerekiyordu. Biraz sıkılmış olabilirsiniz fakat şuan eğlenceli kısma geçtik.

Bir tane index.html sayfası oluşturalım. Daha sonra .content classına sahip bir div oluşturalım bu bizim ana divimiz olacak. Daha sonra .box classına sahip bir tane daha div oluşturalım.

<div class="content">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

Şimdi bunlara biraz css ekleyelim.

.content{
 background-color: #dedede;
 display: grid;
 grid-template-columns: repeat(auto-fill, 25%); /*Genişlik ayarı*/
 grid-auto-rows: 10px; /* grid arası boşluk*/

}

.content .box{
 border-radius: 10px;
 background-color: #FF9F29;
}

Burada 25% yazan yee her bir box’ın width değeridir. 10px yazdığım yer ise her box’un sağ, sol, alt ve üstüne verdiğimiz margin değeridir.

Her bir box divine yüksekliğini belirlemek için bir class vereceğiz. Daha sonra verdiğimiz classlara css değeri ekleyeceğiz. Merak etmeyin ne işe yaradığını anlatacağım :) O zaman üstte ayarladığımız kod dizinini güncelleyelim.

<div class="content">
   <div class="box box_small"></div>
   <div class="box box_mid"></div>
   <div class="box box_large"></div>
</div>

Ekstra olarak css kodlarımıza bu kısmı da ekleyelim.

.box_small{
 grid-row-end: span 26;
}
.box_mid{
 grid-row-end: span 33;
}
.box_large{
 grid-row-end: span 45;
}

Bu kod dizininde box lara bir yükseklik vermiş olduk. Bu yükseklik spanın sağına yazdığımız sayı 10 px olacak şekilde hesaplanıyor. Yani .box_small’in yüksekliği 2610 = 260px.

Evet bu sayede projeyi tamamlamış oluyoruz. Basit bir projeyi detaylı anlatmaya çalıştım. Umarım sıkılmamışsınızdır :) Yeni projelerde görüşmek üzere Hoşça kalın :)))

Aaaa bir dakika canlı demo eklemeyi unutuyordum :) İşte çalışan bir örnek

https://codepen.io/keremgunes27/pen/PoRYeXy

Kendi yapmış olduğum daha komplike bir örneği bırakıyorum.

https://galerico.vercel.app/