Grid Sistemi Nedir? Grid Tasarım Rehberi

Bir web sayfasının, mobil uygulamanın, afişin veya derginin düzenli görünmesi yalnızca kullanılan renk ve yazı tiplerine bağlı değildir. Başlıkların, görsellerin, butonların ve metinlerin sayfa üzerinde belirli bir hizaya göre yerleştirilmesi gerekir. Bu düzeni oluşturan temel yapılardan biri grid sistemidir.

Grid sistemi, bir tasarım yüzeyini kolon, satır, boşluk ve kenar paylarına ayırarak içeriklerin düzenli, dengeli ve tutarlı biçimde yerleştirilmesini sağlayan tasarım altyapısıdır.

Türkçede grid sistemi için şu ifadeler kullanılabilir:

• Izgara sistemi
• Tasarım ızgarası
• Kolon sistemi
• Sayfa düzeni sistemi
• Hizalama kılavuzu

Grid yapısı tasarımın arka planında görünmeyen bir iskelet gibi çalışır. Kullanıcı çoğu zaman kolon çizgilerini görmez; ancak sayfa içerisindeki öğelerin aynı doğrultuda hizalandığını, aralarındaki boşlukların dengeli olduğunu ve içeriğin daha kolay takip edildiğini hisseder.

Grid sistemi şu alanlarda kullanılabilir:

• Web tasarım
• Mobil uygulama tasarımı
• Kullanıcı arayüzü tasarımı
• Gazete ve dergi tasarımı
• Katalog
• Broşür
• Afiş
• Sosyal medya görselleri
• Sunum tasarımı
• Dashboard
• E-ticaret sayfaları
• Kurumsal kimlik çalışmaları

İyi planlanan bir grid sistemi sayesinde:

• Tasarım öğeleri düzenli hizalanır.
• Sayfalar arasında görsel tutarlılık sağlanır.
• Mobil ve masaüstü düzenleri daha kolay hazırlanır.
• İçerik hiyerarşisi güçlenir.
• Tasarım ve yazılım ekipleri ortak ölçülerle çalışır.
• Yeni sayfalar daha hızlı oluşturulur.
• Kullanıcı arayüzü daha anlaşılır hâle gelir.

Ancak grid sistemi tasarımı kısıtlayan değişmez bir kalıp değildir. Doğru kullanıldığında yaratıcı kararların daha kontrollü ve tutarlı biçimde uygulanmasını sağlar.

Grid Sistemi Nedir?

Grid sistemi, tasarım alanını görünmez çizgilerle belirli bölümlere ayıran ve içeriklerin bu bölümlere göre hizalanmasını sağlayan düzen sistemidir.

Bir web sayfasında grid sistemi şu öğelerin yerini belirleyebilir:

• Logo
• Navigasyon menüsü
• Başlık
• Metin alanı
• Görseller
• Ürün kartları
• Formlar
• CTA butonları
• Yan menü
• Footer

Örneğin bir masaüstü web sayfası 12 kolondan oluşan bir grid üzerine kurulabilir. Ana içerik sekiz kolonu, yan menü ise dört kolonu kaplayabilir.

Bu yapı sayesinde farklı sayfalarda aynı ölçüler korunur ve tasarım daha bütünlüklü görünür.

Grid Ne Demek?

“Grid” kelimesi İngilizcede ızgara, kafes veya düzenli çizgiler sistemi anlamına gelir.

Tasarım alanında grid:

• Yatay çizgiler
• Dikey çizgiler
• Kolonlar
• Satırlar
• Boşluklar
• Kenar payları

kullanılarak oluşturulan görsel yerleşim altyapısını ifade eder.

Grid yalnızca dijital tasarıma özgü değildir. Basılı yayınlarda kullanılan sütun sistemleri de grid yaklaşımına dayanır.

Grid Sisteminin Temel Bileşenleri Nelerdir?

Grid sistemi birkaç temel bileşenden oluşur:

• Kolon
• Gutter
• Margin
• Satır
• Modül
• Container
• Breakpoint
• Baseline

Bu bileşenler birlikte kullanılarak tutarlı bir sayfa düzeni oluşturulur.

Kolon Nedir?

Kolon, tasarım yüzeyinin dikey olarak bölündüğü ana alanlardan her biridir.

İçerikler bir veya birden fazla kolonu kaplayabilir.

Örnek:

• Başlık 12 kolon
• Ana içerik 8 kolon
• Yan menü 4 kolon
• Ürün kartı 3 kolon

Kolon sayısı tasarımın yapısına göre değişebilir.

Yaygın kolon sayıları:

• 2 kolon
• 4 kolon
• 6 kolon
• 8 kolon
• 12 kolon
• 16 kolon

Web tasarımında 12 kolon sistemi sık tercih edilir. Bunun temel nedenlerinden biri 12 sayısının 2, 3, 4 ve 6’ya kolayca bölünebilmesidir.

Gutter Nedir?

Gutter, iki kolon arasındaki boşluktur.

Gutter alanı içeriklerin birbirine yapışmasını önler ve görsel ayrım sağlar.

Örneğin:

• Kolon genişliği: 80 piksel
• Gutter: 24 piksel

olarak belirlenebilir.

Gutter çok küçük olduğunda içerikler sıkışık görünebilir. Çok büyük olduğunda ise tasarımda gereksiz boşluk oluşabilir.

Margin Nedir?

Margin, grid yapısının ekranın veya sayfanın dış kenarlarıyla arasındaki boşluktur.

Margin sayesinde içerikler ekran kenarlarına yapışmaz.

Masaüstü, tablet ve mobil cihazlarda margin değerleri farklı olabilir.

Örnek:

Cihaz	Kenar boşluğu
Masaüstü	80 px
Tablet	40 px
Mobil	16–24 px

Bu değerler kesin standart değildir. Tasarımın genişliği, hedef cihaz ve marka dili dikkate alınmalıdır.

Container Nedir?

Container, grid kolonlarının içerisinde bulunduğu ana içerik alanıdır.

Container iki farklı yapıda kullanılabilir:

• Sabit genişlikli container
• Akışkan container

Sabit genişlikli container belirli bir maksimum genişliğe sahiptir. Ekran genişlese bile içerik alanı belirlenen ölçünün üzerine çıkmaz.

Akışkan container ise ekran genişliğine göre büyüyüp küçülebilir.

Satır Nedir?

Satır, içeriklerin yatay olarak yerleştirildiği grid bölümüdür.

Web tasarımında kolonlar çoğunlukla satırlar içerisinde konumlandırılır.

Örneğin:

• Birinci satır: Hero alanı
• İkinci satır: Hizmet kartları
• Üçüncü satır: Referanslar
• Dördüncü satır: İletişim formu

şeklinde bir düzen kurulabilir.

Modül Nedir?

Kolon ve satırların kesişmesiyle oluşan küçük birimlere modül denir.

Modüler gridlerde içerikler bu birimlerin birini veya birkaçını kaplayabilir.

Özellikle:

• Haber siteleri
• Dashboardlar
• Ürün listeleri
• Portfolyo sayfaları
• Görsel galeriler

için modüler grid kullanılabilir.

Baseline Grid Nedir?

Baseline grid, metin satırlarının dikey ritmini düzenlemek için kullanılan yatay kılavuz sistemidir.

Başlık, paragraf, liste ve buton metinlerinin belirli bir dikey ölçüye göre hizalanmasını sağlar.

Örneğin 8 piksel tabanlı bir sistemde boşluk ve yükseklik değerleri:

• 8 px
• 16 px
• 24 px
• 32 px
• 40 px

şeklinde ilerleyebilir.

Bu yaklaşım tasarımın daha düzenli ve tutarlı görünmesine yardımcı olur.

Grid Bileşenleri Karşılaştırması

Bileşen	Görevi	Örnek
Kolon	İçerik genişliğini belirler	Ana içerik 8 kolon
Gutter	Kolonlar arasındaki boşluğu oluşturur	24 px
Margin	Sayfa kenar boşluğunu belirler	Mobilde 16 px
Container	Gridin bulunduğu ana alanı sınırlar	1200 px genişlik
Satır	İçerikleri yatay gruplara ayırır	Ürün kartları satırı
Modül	Satır ve kolon kesişimidir	Dashboard kartı
Baseline	Dikey metin ritmini düzenler	8 px ölçü sistemi
Breakpoint	Düzenin değiştiği ekran genişliğidir	768 px

Grid Sistemi Neden Kullanılır?

Görsel Düzen Sağlar

Grid sistemi, sayfadaki öğelerin rastgele yerleştirilmesini önler. Başlıklar, görseller ve butonlar ortak hizalara göre konumlandırılır.

Tasarım Tutarlılığını Artırır

Bir web sitesindeki farklı sayfaların aynı tasarım diliyle hazırlanmasını sağlar.

Örneğin bütün hizmet sayfalarında:

• Başlık aynı kolon genişliğinde
• Görsel aynı hizada
• CTA aynı konumda
• Metin alanı aynı ölçüde

kullanılabilir.

İçerik Hiyerarşisini Güçlendirir

Önemli içerikler daha geniş alan kaplarken ikincil içerikler daha dar kolonlarda gösterilebilir.

Bu sayede kullanıcı:

• Önce neye bakacağını
• Hangi içeriğin daha önemli olduğunu
• Sayfada nasıl ilerlemesi gerektiğini

daha kolay anlayabilir.

Responsive Tasarımı Kolaylaştırır

Grid sistemi, masaüstü düzeninin tablet ve mobil cihazlara uyarlanmasını kolaylaştırır.

Farklı ekran boyutlarında içeriğin doğru görüntülenmesi için responsive web tasarım yaklaşımı kullanılmalıdır.

Tasarım ve Yazılım Ekiplerini Hizalar

Tasarımcı “bu kart dört kolon kaplıyor” dediğinde geliştirici aynı ölçüyü kod tarafında uygulayabilir.

Bu ortak dil:

• Yanlış anlaşılmaları azaltır.
• Geliştirme süresini kısaltır.
• Tasarıma sadakati artırır.
• Farklı sayfalarda aynı sistemi korur.

Yeni Sayfaların Daha Hızlı Hazırlanmasını Sağlar

Grid sistemi önceden belirlendiğinde yeni sayfalar için yerleşim yapısı sıfırdan oluşturulmaz.

Tasarımcı mevcut kolon ve boşluk sistemini kullanarak yeni ekranlar hazırlayabilir.

Grid Sistemi Türleri Nelerdir?

Manuscript Grid Nedir?

Manuscript grid, tek ve geniş içerik alanından oluşan en basit grid türüdür.

Genellikle şu alanlarda kullanılır:

• Blog yazıları
• Kitap sayfaları
• Uzun makaleler
• Raporlar
• Metin ağırlıklı sayfalar

Bu yapıda ana içerik tek kolon içerisinde gösterilir.

Avantajları:

• Okuması kolaydır.
• Sade görünür.
• Metin odaklı içeriklere uygundur.

Dezavantajları:

• Karmaşık içerikler için yetersiz olabilir.
• Görsel çeşitlilik sınırlı kalabilir.
• Uzun satırlar okunabilirliği azaltabilir.

Column Grid Nedir?

Column grid, sayfanın birden fazla dikey kolona bölündüğü sistemdir.

Web sitelerinde en yaygın kullanılan grid türlerinden biridir.

Örnekler:

• Ana içerik + yan menü
• Üçlü hizmet kartları
• Dörtlü ürün listesi
• İki kolonlu form alanı

Kolonlar eşit genişlikte olmak zorunda değildir.

Modular Grid Nedir?

Modular grid, hem yatay hem dikey bölümlerin birlikte kullanıldığı sistemdir.

Bu grid yapısı küçük modüllerden oluşur.

Şu alanlarda kullanılabilir:

• Dashboard
• Haber portalı
• E-ticaret kategori sayfası
• Takvim
• Görsel galeri
• Veri tablosu

Modüler grid yoğun bilgilerin düzenli biçimde sunulmasını sağlar.

Hierarchical Grid Nedir?

Hierarchical grid, bütün öğelerin aynı kolon yapısına bağlı kalmadığı, içerik önemine göre daha esnek alanların kullanıldığı grid türüdür.

Örneğin:

• Büyük bir hero görseli
• Altında farklı genişliklerde kartlar
• Yan tarafta sabit bilgi alanı

kullanılabilir.

Bu yapı özellikle yaratıcı ve içerik önceliğine göre değişen tasarımlarda tercih edilebilir.

Grid Türleri Karşılaştırması

Grid türü	Yapısı	Uygun kullanım
Manuscript	Tek geniş içerik alanı	Blog ve uzun metin
Column	Dikey kolonlar	Web sitesi ve dergi
Modular	Satır ve kolon modülleri	Dashboard ve ürün listesi
Hierarchical	Esnek ve önem odaklı	Kreatif web sayfaları
Baseline	Yatay metin hizaları	Tipografi ve dikey ritim

12 Kolon Grid Sistemi Nedir?

12 kolon grid sistemi, sayfanın yatay olarak 12 eşit veya orantılı kolona ayrıldığı düzendir.

12 sayısı farklı yerleşimlere kolayca bölünebilir:

• 12 kolon: Tek tam genişlik
• 6 + 6: İki eşit alan
• 4 + 4 + 4: Üç eşit alan
• 3 + 3 + 3 + 3: Dört eşit alan
• 8 + 4: Ana içerik ve yan menü
• 9 + 3: Geniş içerik ve dar yardımcı alan

12 Kolon Kullanım Örnekleri

Yerleşim	Kolon dağılımı	Kullanım örneği
Tam genişlik	12	Hero alanı
İki eşit bölüm	6 + 6	Görsel ve metin
Üç kart	4 + 4 + 4	Hizmet alanları
Dört kart	3 + 3 + 3 + 3	Ürün listesi
Ana ve yan alan	8 + 4	Blog ve sidebar
Geniş ve dar alan	9 + 3	Dashboard

12 kolon sistemi esnekliği nedeniyle birçok CSS frameworkü ve tasarım sistemi tarafından kullanılır.

8 Piksel Grid Sistemi Nedir?

8 piksel grid sistemi, boşlukların, yüksekliklerin ve ölçülerin 8’in katlarına göre oluşturulduğu tasarım yaklaşımıdır.

Örnek değerler:

• 8 px
• 16 px
• 24 px
• 32 px
• 40 px
• 48 px
• 64 px

Bu sistem şu alanlarda kullanılabilir:

• Padding
• Margin
• Kartlar arası boşluk
• Buton yüksekliği
• İkon boyutu
• Form alanı yüksekliği
• Dikey ritim

Bazı durumlarda daha küçük detaylar için 4 piksel ara ölçüsü de kullanılabilir.

8 Piksel Sisteminin Avantajları

• Boşluklar daha tutarlı olur.
• Tasarım kararları hızlanır.
• Geliştiriciye net ölçüler sunulur.
• Responsive ölçeklendirme kolaylaşır.
• Tasarım sistemi oluşturmayı destekler.

Responsive Grid Sistemi Nedir?

Responsive grid, ekran genişliğine göre kolon sayısı, margin, gutter ve içerik genişliği değişebilen grid yapısıdır.

Örneğin ürün kartları:

• Masaüstünde dört kolon
• Tablette iki kolon
• Mobilde tek kolon

olarak gösterilebilir.

Cihaz	Kolon sayısı	Margin	Gutter
Masaüstü	12	80 px	24 px
Tablet	8	32 px	24 px
Mobil	4	16 px	16 px

Bu değerler örnektir. Projenin tasarım sistemine göre farklı ölçüler kullanılabilir.

Breakpoint Nedir?

Breakpoint, web sayfasının düzeninin değiştiği ekran genişliğidir.

Yaygın breakpoint örnekleri:

• 576 px
• 768 px
• 992 px
• 1200 px
• 1440 px

Ancak breakpoint değerleri yalnızca belirli cihaz modellerine göre seçilmemelidir. Tasarımın hangi genişlikte bozulduğu veya içeriğin okunabilirliğini kaybettiği dikkate alınmalıdır.

Sabit ve Akışkan Grid Arasındaki Fark

Sabit Grid

Sabit gridde kolon ve container ölçüleri belirli piksel değerlerine sahiptir.

Avantajları:

• Tasarım ölçüleri daha kontrollüdür.
• Masaüstü yerleşimi tutarlı olabilir.
• Görsel hizalama kolaydır.

Dezavantajları:

• Farklı ekran genişliklerine uyumu sınırlı olabilir.
• Çok geniş ekranlarda gereksiz boşluk oluşabilir.
• Dar ekranlarda yatay taşma yaşanabilir.

Akışkan Grid

Akışkan gridde genişlikler yüzde veya esnek birimlerle belirlenir.

Avantajları:

• Ekran genişliğine uyum sağlar.
• Farklı cihazlarda esnek davranır.
• Kullanılabilir alanı verimli kullanabilir.

Dezavantajları:

• Çok geniş ekranlarda içerikler aşırı büyüyebilir.
• Maksimum genişlik belirlenmezse okunabilirlik düşebilir.
• Görsel oranları dikkatle yönetilmelidir.

Kriter	Sabit grid	Akışkan grid
Ölçü birimi	Piksel	Yüzde ve esnek birimler
Ekrana uyum	Sınırlı	Yüksek
Kontrol	Daha yüksek	Daha esnek
Responsive kullanım	Ek düzenleme gerektirir	Doğal uyum sağlayabilir
Geniş ekran	Boşluk oluşabilir	İçerik fazla genişleyebilir

Modern projelerde sabit maksimum genişlik ile akışkan kolonların birlikte kullanıldığı hibrit sistemler tercih edilebilir.

CSS Grid Nedir?

CSS Grid, web sayfalarında iki boyutlu yerleşimler oluşturmayı sağlayan CSS düzenleme sistemidir.

CSS Grid ile hem kolonlar hem de satırlar birlikte yönetilebilir.

Basit örnek:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

Bu kod:

• Alanı grid yapısına dönüştürür.
• Üç eşit kolon oluşturur.
• Öğeler arasında 24 piksel boşluk bırakır.

HTML:

<div class="grid-container">
    <div class="kart">Kart 1</div>
    <div class="kart">Kart 2</div>
    <div class="kart">Kart 3</div>
</div>

CSS Grid Temel Özellikleri

Özellik

Görevi

display: grid

Grid düzenini etkinleştirir

grid-template-columns

Kolon yapısını belirler

grid-template-rows

Satır yapısını belirler

gap

Satır ve kolon boşluğunu ayarlar

grid-column

Öğenin kaplayacağı kolonları belirler

grid-row

Öğenin kaplayacağı satırları belirler

justify-items

Öğeleri yatay hizalar

align-items

Öğeleri dikey hizalar

minmax()

Minimum ve maksimum ölçü tanımlar

auto-fit

Uygun sayıda kolonu otomatik yerleştirir

Responsive CSS Grid Örneği

.urun-listesi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 992px) {
    .urun-listesi {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .urun-listesi {
        grid-template-columns: 1fr;
    }
}

Bu örnekte:

• Masaüstünde dört kolon
• Orta ekranlarda iki kolon
• Mobilde tek kolon

kullanılır.

CSS Grid ile Flexbox Arasındaki Fark Nedir?

CSS Grid ve Flexbox, web arayüzlerinde kullanılan iki farklı düzen sistemidir.

Grid iki boyutlu, Flexbox ise çoğunlukla tek boyutlu düzenlerde daha uygundur.

Kriter	CSS Grid	Flexbox
Temel yapı	Satır ve kolon	Tek satır veya tek kolon
Boyut	İki boyutlu	Tek boyutlu
Uygun kullanım	Sayfa ve kart düzenleri	Menü ve öğe hizalama
Yerleşim kontrolü	Grid alanı üzerinden	İçerik akışı üzerinden
Öğelerin sırası	Belirli hücrelere yerleştirilebilir	Ana eksende sıralanır
Boşluk yönetimi	Satır ve kolon birlikte	Tek yön ağırlıklıdır
Örnek	Dashboard	Navigasyon menüsü

CSS Grid Ne Zaman Kullanılır?

• Hem satır hem kolon kontrol edilecekse
• Sayfanın genel yerleşimi oluşturulacaksa
• Kartlar düzenli bir matris oluşturacaksa
• Öğeler farklı kolon genişliklerini kaplayacaksa
• Karmaşık responsive düzen hazırlanacaksa

Flexbox Ne Zaman Kullanılır?

• Navigasyon menüsü hazırlanacaksa
• Buton ve ikon hizalanacaksa
• Tek satırda öğeler dağıtılacaksa
• Dikey veya yatay merkezleme yapılacaksa
• Kart içerisindeki öğeler düzenlenecekse

Bir projede CSS Grid ve Flexbox birlikte kullanılabilir.

Örneğin genel sayfa düzeni Grid ile, kartların iç yapısı Flexbox ile hazırlanabilir.

Grid Sistemi ile Bootstrap Grid Arasındaki Fark

Grid sistemi genel bir tasarım yaklaşımıdır. Bootstrap grid ise bu yaklaşımın belirli CSS sınıflarıyla uygulanmasını sağlayan hazır bir sistemdir.

Kriter	Genel grid sistemi	Bootstrap grid
Türü	Tasarım prensibi	Hazır CSS framework yapısı
Kolon sayısı	İhtiyaca göre değişebilir	Genellikle 12
Ölçüler	Tasarımcı belirler	Hazır sınıflar kullanılır
Esneklik	Tamamen özelleştirilebilir	Framework yapısına bağlıdır
Geliştirme süresi	Daha uzun olabilir	Daha hızlı olabilir
Tasarım özgünlüğü	Yüksek	Özelleştirilmezse benzer görünebilir

Hazır framework kullanmak grid sistemini anlamaya olan ihtiyacı ortadan kaldırmaz. Tasarımcı ve geliştirici kolon mantığını bilmelidir.

Grid Sistemi Tasarımda Nasıl Kullanılır?

İçerik Hiyerarşisini Belirleyin

Öncelikle sayfada hangi içeriğin daha önemli olduğu belirlenmelidir.

Örneğin bir kurumsal web sitesinde:

• Ana başlık
• Değer önerisi
• CTA
• Hizmetler
• Referanslar
• İletişim

önem sırasına göre yerleştirilebilir.

Container Genişliğini Seçin

Tasarımın maksimum içerik genişliği belirlenmelidir.

Yaygın örnekler:

• 1140 px
• 1200 px
• 1280 px
• 1440 px

Çok geniş metin alanları okunabilirliği azaltabilir. Bu nedenle ekran genişlese bile metin kolonunun maksimum uzunluğu sınırlandırılabilir.

Kolon Sayısını Belirleyin

Projenin karmaşıklığına göre kolon sayısı seçilmelidir.

• Basit mobil ekran: 4 kolon
• Tablet: 8 kolon
• Masaüstü: 12 kolon

sistemi kullanılabilir.

Gutter ve Margin Ölçülerini Belirleyin

Boşluk değerleri gelişigüzel kullanılmamalıdır.

Tasarım genelinde:

• 8 px
• 16 px
• 24 px
• 32 px
• 48 px
• 64 px

gibi tutarlı ölçüler seçilebilir.

Öğeleri Grid Üzerine Yerleştirin

Başlık, görsel, kart ve metinler belirli kolonları kaplayacak şekilde yerleştirilmelidir.

Örneğin:

• Başlık: 8 kolon
• Açıklama: 6 kolon
• Görsel: 6 kolon
• Ürün kartı: 3 kolon

Mobil Düzeni Ayrı Planlayın

Masaüstü tasarımının yalnızca küçültülmesi mobil tasarım için yeterli değildir.

Mobilde:

• Kolonlar birleşebilir.
• Yan yana öğeler alt alta geçebilir.
• Bazı görseller kaldırılabilir.
• CTA sabitlenebilir.
• Menü açılır yapıya dönüşebilir.
• Metin uzunlukları azaltılabilir.

Figma’da Grid Sistemi Nasıl Kullanılır?

Figma içerisinde frame alanlarına layout grid eklenebilir.

Temel kullanım adımları:

• Frame seçilir.
• Layout Grid alanı açılır.
• Grid türü Columns olarak seçilir.
• Kolon sayısı belirlenir.
• Margin ve gutter değerleri girilir.
• Gridin stretch, left veya center yapısı ayarlanır.
• Tasarım öğeleri kolonlara göre hizalanır.

Figma grid sistemi:

• Tasarımcıların aynı ölçülerle çalışmasını
• Masaüstü ve mobil düzenlerin karşılaştırılmasını
• Tasarım sistemi oluşturulmasını
• Geliştiriciye daha net ölçü aktarılmasını

kolaylaştırabilir.

Farklı tasarım araçlarının özelliklerini karşılaştırmak için en iyi web tasarım programları incelenebilir.

Web Tasarımında Grid Sistemi Nasıl Kullanılır?

Profesyonel bir web sayfasında grid yalnızca kartların yan yana dizilmesi değildir.

Grid sistemi şu kararları etkiler:

• İçerik genişliği
• Menü hizası
• Başlık satır uzunluğu
• Görsel oranları
• Form alanları
• Buton konumları
• Mobil düzen
• Bölümler arası boşluk
• Footer yapısı

Tasarım, içerik ve yazılım kararlarının birlikte planlanması kapsamlı bir web tasarım süreci gerektirir.

E-Ticaret Sitelerinde Grid Kullanımı

E-ticaret sitelerinde grid sistemi özellikle ürün listeleme sayfalarında önemlidir.

Ürün kartları:

• Eşit genişlikte
• Aynı görsel oranında
• Tutarlı bilgi sırasıyla
• Aynı buton konumuyla

gösterilmelidir.

E-Ticaret Grid Örneği

Ekran	Kolon sayısı
Geniş masaüstü	4–5
Standart masaüstü	4
Tablet	2–3
Mobil	1–2

Ürün sayısı arttığında grid yapısıyla birlikte:

• Filtre
• Sıralama
• Kategori menüsü
• Sayfalama
• Hızlı inceleme

alanları da planlanmalıdır.

Dashboard Tasarımında Grid Kullanımı

Dashboardlar farklı boyutlarda veri kartları içerdiği için modüler grid sistemine ihtiyaç duyabilir.

Örnek düzen:

• Toplam satış kartı: 3 kolon
• Kullanıcı sayısı kartı: 3 kolon
• Dönüşüm kartı: 3 kolon
• Gelir kartı: 3 kolon
• Ana grafik: 8 kolon
• Son işlemler: 4 kolon

Grid, yoğun verilerin okunabilir bir yapıda sunulmasını sağlar.

Sosyal Medya Tasarımlarında Grid Kullanımı

Grid sistemi sosyal medya görsellerinde de kullanılabilir.

Bir Instagram postunda:

• Başlık üst bölümde
• Ana görsel merkezde
• Açıklayıcı bilgi alt bölümde
• Logo güvenli alanda

konumlandırılabilir.

Carousel çalışmalarında her slayt aynı grid sistemiyle hazırlandığında seri daha bütünlüklü görünür.

Grid Sistemi ve Görsel Hiyerarşi

Görsel hiyerarşi, kullanıcının hangi içeriği önce, hangisini sonra göreceğini belirleyen tasarım düzenidir.

Grid sistemi görsel hiyerarşiyi şu yollarla destekler:

• Önemli öğelere daha fazla kolon vermek
• Ana başlığı gridin güçlü bir alanına yerleştirmek
• CTA’yı boşlukla ayırmak
• İkincil içerikleri daha dar alanlarda göstermek
• Görsellerin metinlerle hizasını düzenlemek

Kullanıcının arayüzde nasıl hareket edeceğini planlayan kararlar etkileşim tasarımı kapsamında değerlendirilmelidir.

Grid Sistemi ve Tipografi

Grid yalnızca görsel ve kartların yerleşimini değil, metinlerin okunabilirliğini de etkiler.

Tipografide şu unsurlar gridle bağlantılıdır:

• Satır uzunluğu
• Satır yüksekliği
• Paragraf genişliği
• Başlık hizası
• Metin kolonları
• Dikey boşluklar
• Baseline düzeni

Çok geniş metin kolonları kullanıcının bir satırdan diğerine geçmesini zorlaştırabilir. Çok dar kolonlarda ise kelimeler sık sık alt satıra geçer.

Grid Sisteminin Avantajları Nelerdir?

Düzenli Görünüm Sağlar

Tasarım öğeleri ortak çizgiler üzerinde hizalanır.

Tasarım Tutarlılığını Korur

Farklı sayfa ve ekranlarda aynı düzen mantığı devam eder.

Responsive Tasarımı Destekler

Kolonlar ekran boyutuna göre yeniden düzenlenebilir.

Tasarım Sürecini Hızlandırır

Ölçüler önceden belirlendiği için yeni sayfalar daha kolay hazırlanır.

Geliştirici İş Birliğini Kolaylaştırır

Tasarım ölçüleri kod tarafına daha net aktarılır.

İçerik Hiyerarşisini Güçlendirir

Önemli içerikler daha belirgin alanlarda konumlandırılır.

Kullanılabilirliği Artırabilir

Tutarlı yerleşim, kullanıcının sayfayı daha kolay anlamasına yardımcı olur.

Ölçeklenebilir Tasarım Sistemi Oluşturur

Yeni bileşen ve sayfalar mevcut grid yapısına göre geliştirilebilir.

Grid Sisteminin Dezavantajları Nelerdir?

Tasarım Fazla Katı Görünebilir

Grid kurallarına aşırı bağlı kalmak bütün sayfaların birbirine benzemesine neden olabilir.

Yaratıcı Yerleşimleri Sınırlayabilir

Asimetrik veya deneysel tasarımlar için standart kolon yapısı yetersiz kalabilir.

Yanlış Grid Kullanımı Boşluk Sorunu Oluşturabilir

Çok geniş gutter veya margin alanları kullanılabilir içeriği azaltabilir.

Mobil Düzen İhmal Edilebilir

Masaüstü gridi doğrudan mobile uygulamak okunabilirliği bozabilir.

Karmaşık Gridler Geliştirmeyi Zorlaştırabilir

Çok fazla kolon, breakpoint ve istisna kod yapısını karmaşıklaştırabilir.

İçeriğe Uymayan Grid Sorun Oluşturabilir

Grid, içerikten önce katı biçimde belirlenirse metin ve görseller doğal olmayan alanlara sıkıştırılabilir.

Grid Sistemi Ne Zaman Bozulabilir?

Grid kurallarından bilinçli olarak çıkmak bazı durumlarda tasarımı güçlendirebilir.

Örneğin:

• Hero görseli container dışına taşabilir.
• Büyük başlık birkaç kolonu aşabilir.
• Dekoratif öğeler gridin dışında kullanılabilir.
• Belirli kartlar diğerlerinden daha geniş olabilir.
• Kampanya alanı tam ekran gösterilebilir.

Ancak grid dışına çıkmak tesadüfi değil, bilinçli bir tasarım kararı olmalıdır.

Grid Tasarımında Yapılan Hatalar

• Grid kullanmadan öğeleri rastgele hizalamak
• Çok fazla kolon oluşturmak
• Gutter değerlerini tutarsız kullanmak
• Margin alanlarını cihazlara göre değiştirmemek
• Metni gereğinden fazla geniş kolonlarda göstermek
• Mobil grid hazırlamamak
• Bütün öğeleri aynı görsel önemde sunmak
• Tasarımda grid kullanıp kod tarafında uygulamamak
• Farklı sayfalarda farklı kolon sistemleri kullanmak
• Görselleri kolon oranlarına uygun hazırlamamak
• Butonları ortak hizalara yerleştirmemek
• Grid sistemini içerikten bağımsız planlamak
• Tasarımı aşırı katı hâle getirmek
• Breakpointleri yalnızca cihaz isimlerine göre seçmek
• Baseline ve dikey boşluk sistemini ihmal etmek

Grid Sistemi Nasıl Oluşturulur?

Tasarım Alanını Belirleyin

Öncelikle çalışmanın boyutu seçilmelidir.

Örnek:

• 1440 px masaüstü frame
• 768 px tablet frame
• 375 px mobil frame

Container Genişliğini Belirleyin

İçeriğin maksimum genişliği seçilir.

Örnek:

• Ekran: 1440 px
• Container: 1200 px
• Sağ ve sol boşluk: 120 px

Kolon Sayısını Seçin

Masaüstünde 12, tablette 8, mobilde 4 kolon kullanılabilir.

Gutter Ölçüsünü Belirleyin

Kolonlar arasında tutarlı boşluk seçilir.

Örnek:

• Masaüstü: 24 px
• Mobil: 16 px

Margin Değerini Belirleyin

Ekranın kenar boşlukları tanımlanır.

Boşluk Sistemini Oluşturun

8 piksel tabanlı bir sistem tercih edilebilir.

Tasarım Bileşenlerini Yerleştirin

Kart, başlık, görsel, buton ve formlar belirlenen kolonlara göre hizalanır.

Responsive Davranışı Tanımlayın

Hangi öğelerin:

• Alt alta geçeceği
• Gizleneceği
• Tam genişlik olacağı
• Sırasının değişeceği

belirlenmelidir.

Tasarımı Gerçek İçerikle Test Edin

Kısa örnek metinler yerine gerçek başlık, ürün adı ve görseller kullanılmalıdır.

Grid Sistemi Kontrol Listesi

Temel Yapı

• Tasarım alanı belirlendi mi?
• Container genişliği tanımlandı mı?
• Kolon sayısı uygun mu?
• Gutter değeri tutarlı mı?
• Margin değerleri belirlendi mi?
• Boşluk sistemi oluşturuldu mu?
• Baseline ritmi kullanılıyor mu?
• Grid içerik yapısına uygun mu?

Responsive Tasarım

• Masaüstü gridi hazır mı?
• Tablet gridi hazır mı?
• Mobil gridi hazır mı?
• Breakpointler içerik davranışına göre seçildi mi?
• Kartlar farklı ekranlarda doğru sıralanıyor mu?
• Metin genişliği mobilde uygun mu?
• Dokunma alanları yeterli mi?
• Yatay taşma bulunuyor mu?

Tasarım Tutarlılığı

• Başlıklar aynı hizayı kullanıyor mu?
• Görseller kolonlara uyuyor mu?
• Kartlar eşit aralıklara sahip mi?
• Buton konumları tutarlı mı?
• Form alanları aynı ölçü sistemini kullanıyor mu?
• Sayfalar arasında grid değişiyor mu?
• Dikey boşluklar tutarlı mı?
• Tasarım sistemi belgelenmiş mi?

Geliştirme Kontrolü

• Tasarım ölçüleri geliştiriciye aktarıldı mı?
• CSS Grid veya uygun yöntem seçildi mi?
• Gutter değerleri kodda doğru mu?
• Breakpointler tasarımla eşleşiyor mu?
• Görseller responsive çalışıyor mu?
• Tarayıcı testleri yapıldı mı?
• Farklı ekran genişlikleri kontrol edildi mi?
• Tasarım ile canlı sayfa karşılaştırıldı mı?

Grid Sistemi Hakkında Sıkça Sorulan Sorular

Grid sistemi nedir?

Tasarım yüzeyini kolon, satır, boşluk ve kenar paylarına ayırarak içeriklerin düzenli biçimde yerleştirilmesini sağlayan sistemdir.

Grid ne demek?

İngilizcede ızgara anlamına gelir. Tasarımda hizalama ve yerleşim kılavuzunu ifade eder.

Grid sistemi ne işe yarar?

Tasarım öğelerini hizalar, sayfalar arasında tutarlılık sağlar ve responsive tasarımı kolaylaştırır.

Kolon nedir?

Tasarım alanının dikey olarak bölündüğü ana yerleşim alanıdır.

Gutter nedir?

Grid kolonları arasındaki boşluktur.

Margin nedir?

Grid yapısı ile ekranın dış kenarları arasındaki boşluktur.

Container nedir?

Grid kolonlarının ve ana içeriğin bulunduğu sınırlandırılmış alandır.

12 kolon grid nedir?

Sayfanın 12 dikey kolona bölündüğü esnek yerleşim sistemidir.

Neden 12 kolon kullanılır?

12 sayısı 2, 3, 4 ve 6’ya kolayca bölünebildiği için çok sayıda yerleşim seçeneği sunar.

8 piksel grid nedir?

Boşluk ve ölçülerin 8’in katları kullanılarak oluşturulduğu tasarım sistemidir.

Responsive grid nedir?

Kolon, margin ve gutter değerlerinin ekran genişliğine göre değiştiği grid yapısıdır.

Breakpoint nedir?

Sayfa düzeninin değişmeye başladığı belirli ekran genişliğidir.

CSS Grid nedir?

Web sayfalarında satır ve kolon tabanlı iki boyutlu düzenler oluşturan CSS sistemidir.

CSS Grid ile Flexbox aynı mı?

Hayır. Grid iki boyutlu, Flexbox ise çoğunlukla tek boyutlu yerleşimler için kullanılır.

CSS Grid mi Flexbox mı kullanılmalı?

Sayfa ve kart düzenlerinde Grid, tek satır veya kolon hizalamalarında Flexbox kullanılabilir. İkisi birlikte de uygulanabilir.

Grid sistemi yalnızca web tasarımda mı kullanılır?

Hayır. Mobil uygulama, dergi, katalog, afiş, sunum ve sosyal medya tasarımlarında da kullanılabilir.

Mobil tasarımda kaç kolon kullanılmalı?

Kesin bir sayı yoktur. Dört kolonlu sistem mobil arayüzlerde yaygın olarak kullanılabilir.

Masaüstünde kaç kolon kullanılmalı?

12 kolon sık tercih edilir. Projenin içeriğine göre 8 veya 16 kolon da kullanılabilir.

Grid tasarımı kısıtlar mı?

Aşırı katı kullanılırsa kısıtlayabilir. Esnek kullanıldığında yaratıcı kararları daha kontrollü hâle getirir.

Grid dışına çıkılabilir mi?

Evet. Hero görselleri ve dekoratif öğeler bilinçli biçimde grid dışına taşabilir.

Figma’da grid kullanılır mı?

Evet. Layout Grid özelliğiyle kolon, gutter ve margin değerleri tanımlanabilir.

Bootstrap grid nedir?

Bootstrap frameworkü içerisinde bulunan responsive 12 kolon yerleşim sistemidir.

Grid sistemi SEO’yu etkiler mi?

Doğrudan bir sıralama faktörü değildir. Responsive ve kullanılabilir bir sayfa oluşturmaya katkı sağlayarak kullanıcı deneyimini dolaylı biçimde destekleyebilir.

Grid sistemi site hızını etkiler mi?

Doğru CSS kullanımı genellikle önemli yük oluşturmaz. Karmaşık ve gereksiz kod yapıları performansı etkileyebilir.

Grid sisteminde piksel mi yüzde mi kullanılmalı?

Sabit ve akışkan ölçüler projenin ihtiyaçlarına göre birlikte kullanılabilir.

Grid ile ürün kartları nasıl düzenlenir?

Masaüstünde çoklu kolon, mobilde tek veya çift kolon kullanılarak responsive ürün listesi oluşturulabilir.

Grid sistemi tasarımcı için neden önemlidir?

Hizalama, boşluk ve içerik hiyerarşisi kararlarını sistemli hâle getirir.

Grid sistemi geliştirici için neden önemlidir?

Tasarım ölçülerinin CSS yapısına tutarlı biçimde aktarılmasını kolaylaştırır.

Grid Sistemini Görünmez Bir Kılavuz Olarak Kullanın

Grid sistemi, web sitesi, mobil uygulama ve görsel tasarımlarda öğelerin düzenli, dengeli ve tutarlı biçimde yerleştirilmesini sağlayan temel tasarım altyapılarından biridir.

Doğru kullanılan bir grid sistemi:

• İçerikleri hizalar.
• Görsel hiyerarşiyi güçlendirir.
• Sayfalar arasında tutarlılık sağlar.
• Responsive tasarımı kolaylaştırır.
• Tasarım ve yazılım ekiplerini ortak ölçülerde buluşturur.
• Yeni ekranların daha hızlı hazırlanmasını sağlar.
• Kullanıcı deneyimini geliştirebilir.

Başarılı bir grid tasarımı için yalnızca kolon sayısını seçmek yeterli değildir. Şu unsurlar birlikte değerlendirilmelidir:

• Container genişliği
• Kolon sayısı
• Gutter
• Margin
• Dikey boşluk sistemi
• Baseline
• Breakpointler
• Mobil davranış
• İçerik hiyerarşisi
• Tasarım bileşenleri

Grid sistemi tasarımın görünmeyen kılavuzudur. Kullanıcı kolon çizgilerini görmese bile düzenli hizalama ve dengeli boşluklar sayesinde arayüzü daha kolay anlayabilir.

Bununla birlikte grid, her öğenin değişmez biçimde aynı hizaya sıkıştırılması anlamına gelmez. Belirli görseller, başlıklar ve kampanya alanları tasarım amacı doğrultusunda grid dışına çıkarılabilir. Önemli olan bu kararların rastgele değil, bilinçli olarak alınmasıdır.

Grid, tipografi, renk, görsel hiyerarşi, içerik ve kullanıcı etkileşimlerinin bir bütün olarak planlanması profesyonel web tasarım nasıl hazırlanır yaklaşımının önemli bir parçasıdır.

İşletmeler web sitesi hazırlarken yalnızca estetik görünüme değil; mobil uyumluluk, performans, kullanılabilirlik ve ölçeklenebilir tasarım sistemlerine de dikkat etmelidir. Bu süreçte deneyimli bir web tasarımcı ile çalışmak, tasarım kararlarının teknik yapıya doğru aktarılmasını kolaylaştırabilir.

Grid sisteminin kullanıcı deneyimi (UX) ve arayüz (UI) kararlarıyla ilişkisini daha kapsamlı incelemek isteyenler Web Tasarımda UX/UI Nedir, Neden Önemlidir? içeriğine bakabilir.