--- title: "Grid nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/grid language: tr --- # Grid nedir? Grid, içeriklerin sütun, satır ve boşluk ilişkilerini tutarlı düzenlemeye yarayan yerleşim sistemidir. Diğer adlar: Izgara sistemi. ## Nerede işine yarar? Sütun sayısı, kenar boşlukları ve aralıklar içerik ihtiyacına göre belirlenir. Ekran daraldığında yalnız öğeleri küçültmek yerine düzen yeniden kurulabilir. Grid, sayfalar arasında hizayı korurken farklı içerik türlerine uygun çeşitliliğe izin verir. ## Bir cümlede uygulaması Yan sayfanın içerik alanını header ile aynı maksimum genişlikte tutmak. ## Neyle karıştırılmamalı? Grid zorunlu olarak her öğeyi aynı büyüklüğe getirmez; hizalama için ortak bir çerçeve sunar. ## Sayfalar değişiyor. Kenarlar neden yer değiştiriyor? Bir stüdyo sitesinde üst menü belirli bir içerik genişliğine otururken hizmet sayfası daha içerden, footer başka bir kenardan başlıyor olsun. Her bölüm kendi içinde düzenli görünse bile sayfa bütününde ilişki zayıflar. Grid bu ortak hizaları görünür bir sisteme bağlar. Kenar boşluğu, içerik rayı, sütun aralığı ve okuma ölçüsü aynı şey değildir; her birinin görevi ayrılır. Böylece yeni bir sayfa mevcut sitenin içine yerleşir, ayrı bir belge gibi başlamaz. Örnekte genel içerik rayı görseller ve geniş kompozisyonlar için alan sağlar. Uzun yazı ise bu rayın içinde daha dar bir okuma ölçüsü kullanabilir. Bu iki genişliğin farklı olması hata değildir; amaçları farklıdır. Sorun dar okuma alanının sebepsizce her bölümde başka bir noktaya kaymasıdır. Tanım, örnek, görsel ve kaynaklar arasında bilinçli ilişkiler kurulduğunda sayfa hem çeşitlenebilir hem aynı sistemin parçası olarak kalabilir. Mobilde sütun sayısını azaltmak başlangıçtır, fakat bütün uyarlama bu değildir. Kartların iç boşluğu, başlığın satır kırılımı ve görselin oranı yeniden düşünülür. Geniş ekrandaki iki sütunu sadece alt alta koymak, bir bölümün destekleyici parçasını ana içerikten çok uzağa taşıyabilir. İçerik sırası ve gruplama da grid kararının parçasıdır. Aynı dış kenarları korumak, her öğeye aynı iç boşluğu vermeyi gerektirmez; hiyerarşi ve kullanım dikkate alınır. Grid'i tasarımın görünür süsü haline getirmek de zorunlu değildir. Kullanıcı sütun çizgilerini görmeden düzenin tutarlılığını hissedebilir. Sistem, üretim ekibinin yeni bir içeriği nereye yerleştireceğini bilmesine yardım eder. Bazen bir görsel rayın dışına bilinçli olarak taşabilir; bu istisna ortak kurala göre anlam kazanır. Her bölüm rastgele taştığında ise artık istisna değil, dağınık bir yerleşim oluşur. Esnek bir düzen, hangi hizanın neden korunduğunu açıklayabilir. ### Dış ray Üst menü, ana içerik ve footer için ortak dış hizayı belirle. Sayfa türü değiştiğinde kenarların sebepsizce kaymamasını sağla. Bu karar, özellikle farklı ekiplerin bağımsız bölümler ürettiği projelerde bütünlüğü korumaya yardım eder. ### İç ölçü Uzun metin, tablo, görsel ve kontrol yüzeyinin ne kadar alana ihtiyaç duyduğunu ayır. Bütün içeriği tek genişliğe zorlamak okunurluğu veya kullanımını bozabilir. İçerik rayı içinde farklı ama birbirine bağlı ölçüler tanımlanabilir. ### Dar ekran Sütunlar birleştiğinde okuma sırasını, boşlukları ve ilişkileri yeniden değerlendir. Mobil düzen masaüstünün küçültülmüş fotoğrafı değildir. Ortak hizalar korunurken hangi parçanın önce gelmesi gerektiği içerik amacına göre seçilir. ## Izgara kurmak ve her şeyi aynı kutuya koymak. ### Tekrarlanan eşit kutular Her bölümü aynı genişlikte kartlara bölmek uygulamayı hızlandırabilir ama içeriklerin farklı görevlerini gizleyebilir. Bir uzun açıklama, kısa istatistik ve görsel hikâye aynı kompozisyona girdiğinde gereksiz boşluklar veya sıkışma oluşabilir. Eşit kutular bazı karşılaştırmalarda yararlıdır; bütün sayfanın tek düzeni olmak zorunda değildir. Grid'in amacı her şeyi aynılaştırmak değil, farklı parçalar arasında ortak bir ilişki kurmaktır. ### Paylaşılan hizalama sistemi Aynı sütun ve kenar kararları içinde farklı genişlikler kullanılabilir. Bir bölüm tam rayı kaplarken başka biri metin ve örnek alanına ayrılabilir. Boşluk ve hizalar ortak kaldığında bu çeşitlilik dağınıklık yaratmaz. İçerik değiştiğinde sistemin nasıl esneyeceği bellidir. Bu yaklaşım sayfaları bir şablon kopyasına dönüştürmeden aynı sitenin parçaları olarak hissettirmeye yardımcı olur. ## Ortak hizayı korurken çeşitlilik üretmek Grid bütün bölümleri aynı sayıda kutuya zorlamak için kullanılmaz. Ortak kolonlar farklı genişlikte içerikleri aynı hizalara bağlayabilir. Böylece bir bölümde büyük bir görsel, başka bir bölümde kısa metin ve araçlar olsa bile sayfa aynı sisteme ait görünür. - İçerik kenarları ve kolon aralıklarını ortaklaştır. - Farklı bölüm türlerini aynı hizalar üzerinde dene. - Mobilde kolonları azaltırken okuma sırasını koru. ## Her öğe bütün kolonları doldurmalı mı? Hayır. Boş kalan alan da kompozisyonun parçasıdır. Metni sırf kolonu doldurmak için uzatmak veya görseli gereksiz büyütmek yerine içerik ihtiyacına uygun genişlik seçilir. ## Bu karar, işinin neresinde? Grid kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) ## Karar masası ### Kaç sütun kullanmak gerekir? İçerik ve gereken bölünebilirlik belirler. Yaygın sütun sayıları başlangıç kolaylığı sağlayabilir ama otomatik doğru cevap değildir. Basit bir editoryal sayfa ile yoğun bir ürün karşılaştırması aynı ihtiyacı taşımaz. Önce olası bölüm türlerini çıkar ve hangi oranlarda bölünmeleri gerektiğini düşün. Sonra sütun sayısını seç. Bir sistemin değerini sütun adedi değil, gerçek içerikleri gereksiz istisna üretmeden düzenleyebilmesi gösterir. ### Okuma alanı header ile aynı genişlikte mi olmalı? Dış hizalar ortak olabilir, uzun paragrafın ölçüsü ise daha dar tutulabilir. Bu ayrım önemlidir. Görsel, örnek ve bölüm çerçevesi genel içerik rayını kullanırken metin kendi okunabilir ölçüsünde yer alabilir. Sorun her sayfada rastgele ikinci bir dış boşluk yaratmaktır. Hangi genişliğin sayfa sınırını, hangisinin okuma ölçüsünü anlattığı net olursa hem bütünlük hem metnin rahatlığı korunabilir. ### Asimetrik düzen grid'i bozar mı? Hayır. Asimetri ortak bir hizalama sisteminin içinde bilinçli olarak kurulabilir. Büyük görsel ile daha dar metin alanı farklı ağırlıklar taşır ama aynı ray ve aralık kurallarına bağlanabilir. Eşitsizlik ile tutarsızlık farklıdır. Sol ve sağ dış boşlukların istemeden farklılaşması bir hata olabilir; iç kompozisyondaki farklı oran ise anlatının gereği olabilir. Tasarım bu farkı açıklayabildiğinde asimetri rastgele görünmez. ### Grid yalnız tasarım dosyasında mı yaşar? Hayır. Uygulamadaki maksimum genişlik, kenar boşluğu, sütun ve aralık kararları tasarımla aynı mantığı taşımalıdır. Her geliştiricinin benzer ama farklı değerler kullanması zamanla sayfalar arasında kaymalara yol açabilir. Ortak bileşenler ve tasarım tokenları bu kararların paylaşılmasını kolaylaştırır. Yine de her içeriği teknik olarak aynı düzene zorlamak gerekmez; sistemin hangi varyantları desteklediği açıkça tanımlanmalıdır. ## Üç sayfanın kenarlarını üst üste düşün. Ana sayfa, hizmet detayı ve bir yazı sayfası seç. İçerikleri farklı olsa da hangi dış hizaların ortak olduğunu incele. Ardından metin ölçüsü ile genel sayfa rayını birbirinden ayırarak gerçek tutarsızlığı bulmaya çalış. - [ ] Header, ilk içerik ve footer başlangıcını işaretle. Kaymalar bilinçli bir kompozisyon kararı mı, yoksa bağımsız eklenmiş kenar boşluklarının sonucu mu ayır. Her farkı hata saymadan önce işlevini sor. - [ ] Uzun metni ve geniş görseli aynı ölçüye zorlamadan ortak ray içinde yerleştir. Metnin kendi genişliği olsa da çevresindeki bölümlerle bağlantısı görülsün. Yeni bir iç çerçeve eklemenin gerekli olup olmadığını değerlendir. - [ ] Aynı bölümlerin dar ekranda nasıl sıralandığını kontrol et. Kenar boşlukları, iç padding ve kart aralığı birbirinden ayrı kararlardır. Birini değiştirirken diğerinin istemeden iki katına çıkmadığından emin ol. Grid tasarımın hayal gücünü sınırlayan kareler değil, farklı fikirlerin aynı sayfada birlikte durmasını sağlayan ilişkiler sistemidir. Ortak kenarlar ve açık iç ölçüler olduğunda içerik çeşitlenebilir; her yeni sayfa siteye ait kalır. ## Bağlantılı kavramlar - [Responsive tasarım](https://androverse.com.tr/sozluk/responsive-tasarim) — Responsive tasarım, arayüzün farklı ekran ölçülerinde içerik ve etkileşim önceliklerini koruyarak uyarlanmasıdır. - [Kompozisyon](https://androverse.com.tr/sozluk/kompozisyon) — Kompozisyon, bir görseldeki öğelerin ilişki, denge ve dikkat sırası oluşturacak biçimde düzenlenmesidir. - [Tipografi](https://androverse.com.tr/sozluk/tipografi) — Tipografi, yazının harf biçimi, ölçüsü, aralığı ve yerleşimiyle okunabilir ve anlamlı bir düzen kurmaktır. ## Konuyu uygulamaya taşı - [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) — Grid kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [Sunumda “disruptive”. Çıktıda aynı şablon.](https://androverse.com.tr/blog/sunumda-disruptive-ciktida-ayni-sablon) — Grid ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [Nielsen Norman Group — Görsel tasarım sözlüğü](https://www.nngroup.com/articles/visual-design-cheat-sheet/) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)