Bir tasarımın neden "düzenli" göründüğünü çoğu zaman tek tek fark etmeyiz; arkada görünmez bir iskelet vardır ve grid sistemi tasarım dediğimiz şey tam olarak bu iskelettir. Grid, sayfayı eşit aralıklı sütun ve satırlara bölerek metni, görseli ve butonu hizalamamızı sağlar. İyi kurulmuş bir grid, elemanların nereye oturacağına dair her seferinde yeniden karar verme yükünü ortadan kaldırır; gözün takip edebileceği bir ritim ve bir mantık kurar. Bu yazıda grid'in temel parçalarını, sütun ve baseline grid mantığını, gerçek bir CSS uygulamasını ve sık yapılan hataları sırayla ele alıyorum.
Grid neden işe yarar
Grid'in asıl katkısı estetik değil, tutarlılıktır. Aynı görünmez çizgilere oturan başlıklar, paragraflar ve görseller arasında gözün algıladığı bir hizalama oluşur; bu hizalama, içeriği bilinçaltında "profesyonel" ve "güvenilir" kılar. Pratikte grid üç sorunu birden çözer:
- Karar yükünü azaltır: Her elemanın genişliği ve konumu sütunlara göre belirlenir, sürekli "kaç piksel?" sorusunu sormazsın.
- Tutarlılık verir: Aynı projede onlarca ekran aynı sisteme oturduğu için bütün bir görünüm sağlanır.
- Ekip çalışmasını kolaylaştırır: Tasarımcı ve geliştirici aynı sütun dilini konuştuğunda Figma'daki düzen koda neredeyse birebir aktarılır.
Grid'in yapı taşları
Bir sütun grid'i konuşurken birkaç terim sürekli geçer. Bunları netleştirmek, sonraki adımları çok kolaylaştırır:
- Sütun (column): İçeriğin oturduğu dikey alan. Web'de yaygın seçim 12 sütundur; 12 sayısı 2'ye, 3'e, 4'e ve 6'ya bölünebildiği için esnek düzenler kurmayı sağlar.
- Oluk (gutter): İki sütun arasındaki boşluk. Elemanların birbirine yapışmasını engeller ve nefes alanı yaratır.
- Kenar boşluğu (margin): Grid'in ekran kenarına olan mesafesi. Mobilde küçük, geniş ekranda büyük tutulur.
- Modül ve satır: Sütunların yatay çizgilerle kesişmesiyle oluşan hücreler; kart ve görsel blokları bu modüllere oturur.
Bu dört kavram bir araya geldiğinde "ne kadar geniş, nereden başlıyor, kaç sütun kaplıyor" sorularının hepsi sayılarla yanıtlanabilir hale gelir.
Baseline grid: dikey ritim
Sütun grid'i yatay hizalamayı çözer; baseline grid ise dikey hizalamayı çözer. Baseline grid, sayfayı eşit yükseklikte yatay çizgilere böler ve tüm metin satırlarının bu çizgilere oturmasını hedefler. Mantık şudur: bir taban birimi seçersin (örneğin 8 px) ve line-height, başlık boşlukları, paragraf araları gibi tüm dikey ölçüleri bu birimin katları olarak verirsin. Sonuçta iki ayrı sütundaki metin satırları aynı yükseklikte hizalanır ve sayfa "oturmuş" görünür.
Web'de baseline grid'i piksel piksel kovalamak zordur, çünkü font metrikleri tarayıcıya göre değişir. Bu yüzden pratik yaklaşım, mükemmel baseline yerine tutarlı bir dikey aralık ölçeği kurmaktır: tüm boşlukları 4 veya 8'in katı tutmak, gözün fark edemeyeceği kadar düzenli bir ritim verir.
CSS Grid ile uygulama
Modern tarayıcılarda 12 sütunlu bir grid'i kurmak için ayrı bir kütüphaneye gerek yok; CSS Grid bunu doğrudan yapar. Aşağıdaki örnek 12 sütun, sabit oluk ve duyarlı kenar boşluğu tanımlar:
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px; /* oluk */
max-width: 1200px;
margin-inline: auto; /* sayfayı ortala */
padding-inline: 24px; /* kenar boşluğu */
}
/* Bir kart 4 sütun kaplasın */
.card {
grid-column: span 4;
}
/* Geniş bir blok 8 sütun, sağdan başlasın */
.feature {
grid-column: 5 / 13;
}Mobilde 12 sütunu tek sütuna indirmek için tek bir medya sorgusu yeterlidir. Burada önemli olan, sütun sayısını içeriğe göre azaltmak; kartları sıkıştırmak değil:
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; gap: 16px; }
.card, .feature { grid-column: 1 / -1; }
}Dikey ritmi korumak için bir aralık ölçeği değişkeni tanımlamak işi sadeleştirir. Tüm dikey boşlukları bu adımlara bağladığında baseline mantığını koda taşımış olursun:
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
}
h2 { margin-block: var(--space-4) var(--space-2); }
p { margin-block: 0 var(--space-3); }Grid'i bilinçli bozmak
Grid bir hapishane değil, bir referanstır. En çarpıcı tasarımlar genellikle grid'i kuran sonra onu bilerek bozanlardır: bir görseli sütun sınırını taşıracak şekilde büyütmek, bir başlığı kenar boşluğuna doğru kaydırmak gözü yakalar. Buradaki kural basit: bozmak için önce kurmak gerekir. Sistem yoksa, "bozmak" rastgelelikten ayırt edilemez. Grid sağlam olduğunda tek bir istisna güçlü bir vurguya dönüşür; grid yokken her şey istisna gibi görünür.
Sık yapılan hatalar
- Çok fazla sütun: 24 sütun esneklik gibi görünse de çoğu projede 12 fazlasıyla yeter ve yönetimi kolaydır.
- Olukları unutmak: Oluk olmadan sütunlar birbirine yapışır; hizalama doğru olsa bile tasarım sıkışık görünür.
- Keyfi boşluklar: 13 px, 19 px, 27 px gibi rastgele değerler ritmi bozar. Tüm boşlukları 4 veya 8'in katlarına sabitle.
- Grid'i mobilde olduğu gibi taşımak: Masaüstündeki 12 sütunu dar ekrana sıkıştırmak okunmazlık yaratır; sütun sayısını azalt.
Sık Sorulan Sorular
Kaç sütunlu grid kullanmalıyım?
Web arayüzleri için 12 sütun en yaygın ve en esnek seçimdir, çünkü 2, 3, 4 ve 6 parçaya temiz şekilde bölünür. Basit içerik sayfalarında 6 veya 8 sütun da yeterlidir; önemli olan tek bir sistem seçip ona sadık kalmaktır.
Baseline grid web'de gerçekten gerekli mi?
Piksel mükemmelliğinde bir baseline grid web'de çoğu zaman gereksiz çabadır. Bunun yerine tüm dikey boşlukları 4 veya 8'in katı tutan bir aralık ölçeği kurmak, aynı düzen hissini çok daha az uğraşla verir.
CSS Grid mi Flexbox mu kullanmalıyım?
İki boyutlu sayfa düzenleri (satır ve sütunun birlikte yönetildiği yerler) için CSS Grid idealdir. Tek bir eksende sıralanan öğeler (bir navigasyon barı, bir buton grubu) için Flexbox daha pratiktir. İkisini birlikte kullanmak en yaygın yaklaşımdır.
Düzeni baştan doğru kurmak, sonradan onlarca küçük hizalama düzeltmesinden çok daha hızlıdır. Markanıza özel, ölçeklenebilir bir grid sistemi ve arayüz tasarımı için benimle iletişime geçin.