Grid Nedir? Grid Tekniği Ne İşe Yarar?

0 1.816

Grid, Türkçe karşılığını ızgara ya da kafes olarak tanımladığımız, belirli bir alan için görünmez kabul edilen yatay ve dikey çizgilere göre hızlama tekniğine veya sistemine denir.Web tasarım jargonuna yeni girmiş olan bu ifade, görsel algıyı artırmak için kullanılır.

Grid tekniği ya da sistemine göre bir web sayfasının tamamı tasarım aşamasında belirli sayıda sütun ile kaplanır.Yani 12 sütunlu bir tasarımda bir sayfanın tamamının bu sütunlar arasında bölüşülür ve sütunlar arasında küçük bir boşluk bulunur.Örnek olarak basit bir web sayfasında bir sidebar olduğunu düşünelim.Ana kısım ve yan kısımdan oluşan bu sayfa, 12 sütun ile bölünür.9 sütun ana kısıma, 3 sütunda sidebar kısmına denk gelir.

Aşağıdaki fotoğrafa dikkatlice bakalım.Bir siteyi 12 sütuna bölüyoruz.Burada sitenin sol tarafı 7 sütün kaplarken, sidebar kısmı 5 sütun kaplıyor.

Grid nedir, grid tekniği nedir grid sistemi

Web tasarımcılar genelde grid sisteminde 12 sütun ya da 16 sütun yapısını tercih ediyorlar.Ama bu tamamen size kalmış bir durum.İstediğiniz sayıda sütun ile oluşturabilirsiniz.Ama sayı ne kadar artarsa, karmaşık bir hale gelecektir.Daha az sayılarda, mobil uyumlu site tasarlarken sıkıntı çıkaracaktır.Bana göre en ideali 12 sütuna göre oluşturmak daha uygun.

Peki Neden Kullanılr?

Grid sisteminin en önemli kullanım amacı site alt yapısını düzenlemede sağladığı kolaylıktır.Sitenin HTML tasarımını oluştururken alanların ne kadar yer kaplayacağı bilindiği için rahat bir çözüm sunar.

Diğer taraftan belkide en çok kullanılma amacı mobil öncelikli site tasarlarken oldukça işe yaramasıdır.Mesela yukarıda resim gördüğünüz 7-5 sütun tasarımı normal web görünümü için kullanılır.Eğer mobil tasarım yapıyorsanız genelde 7 sütunlu yer 12 sütunun tamamını kaplar.5 sütunlu kısım aşağı tarafa geçer ve o da 12 sütunun tamamını kaplar.

Genelde portföy sitelerinde gördüğümüz 4 parçalı yapılarda her parça 3 sütün değerindedir.Fakat viewport değiştikçe yani ekran küçüldükçe bu parçaların kapladıkları sütünlarda artar.

Behance.net ziyaret ederseniz 4 parçadan oluşan bir tasarım alanı görürsünüz.Yani her parça 3 sütun kaplar.Eğer ekranı küçültmeye başlarsanız önce 3 parçaya daha sonra da 2 parçaya düşer.Bu 2 parçanın her birisi 6 sütun değerine denk gelir.

Biraz kafa karıştırıyor ama yukardaki fotoğraf bir nebze olsun bunu anlaşılır kılmıştır.

Bunları da beğenebilirsin