Grid Sistemi Nedir?
Kısa tanım
Grid sistemi, bir sayfadaki öğeleri yerleştirmek için kullanılan sütunlardan, sütunlar arası boşluklardan (gutter) ve kenar boşluklarından oluşan görünmez düzen iskeletidir. Web tasarımında en yaygın biçimi, ekran daraldıkça sütun sayısı azalan 12 sütunlu yapıdır. Grid; hizalamayı, sayfalar arası tutarlılığı ve tasarımcı ile geliştirici arasındaki ortak dili sağlar. Kodda genellikle CSS Grid veya bir framework ile uygulanır.
Diğer adları: ızgara sistemi, layout grid, sütun ızgarası, 12 sütunlu grid, 12-column grid
Bir grid'in parçaları
- Sütunlar (columns): İçeriğin yerleştiği eşit genişlikteki dikey şeritler. Bir öğe bir veya birden fazla sütunu kaplar.
- Oluklar (gutters): Sütunlar arasındaki sabit boşluklar. İçeriğin birbirine yapışmasını önler.
- Kenar boşlukları (margins): Grid'in ekran kenarlarıyla arasındaki alan. Mobilde dar, geniş ekranda daha cömert tutulur.
- Kapsayıcı genişliği: Geniş ekranlarda grid'in sonsuza kadar uzamaması için konan üst sınır; örneğin 1200 piksel ve ortalanmış.
Grid görünmezdir; varlığı, öğelerin kenarlarının sayfa boyunca aynı dikey çizgilere oturmasından anlaşılır. Bu hizalama, görsel hiyerarşi kurmanın sessiz bir parçasıdır: düzenli bir zeminde, bilinçli olarak dışarı taşan tek bir öğe hemen dikkat çeker.
Neden 12 sütun?
12; 2'ye, 3'e, 4'e ve 6'ya tam bölünür. Böylece aynı grid üzerinde ikiye bölünmüş bir içerik alanı (6+6), üç kartlık bir sıra (4+4+4), dört özellik kutusu (3+3+3+3) veya bir ana kolon ile kenar çubuğu (8+4) kurulabilir. Bootstrap gibi yaygın framework'lerin 12 sütunlu grid kullanması da bu esnekliğe dayanır. 16 veya 24 sütunlu grid'ler daha ince bölünme isteyen yoğun arayüzlerde kullanılır; az sütunlu basit grid'ler ise metin ağırlıklı sitelerde yeterli olabilir.
Ekran daraldıkça sütunlar
Telefonda 12 sütun pratik değildir: her sütun birkaç piksele iner. Bu yüzden birçok tasarım sistemi sütun sayısını breakpoint'lere bağlar. Yaygın bir düzen dar ekranda 4, orta genişlikte 8, geniş ekranda 12 sütundur. Bu durumda "üç sütunlu kart sırası" geniş ekranda 4+4+4, tablette 8 sütunun içinde iki kart, telefonda kartlar alt alta olur. Bu kararların wireframe aşamasında her genişlik için çizilmesi, geliştirme sırasında tahmin yürütmeyi azaltır.
Tasarım grid'inden koda
Tasarım aracındaki sütun düzeni, CSS'te birkaç satırla karşılanabilir. Burada CSS Grid kullanılıyor; değerler design token olarak tanımlandığında tasarım dosyası ile kod aynı ölçüleri paylaşır:
.sayfa {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 1.5rem; /* gutter */
padding-inline: 1rem; /* margin */
max-width: 75rem;
margin-inline: auto;
}
.ana-icerik { grid-column: span 8; }
.kenar-cubuk { grid-column: span 4; }minmax(0, 1fr) kullanımı, uzun bir kelime veya geniş bir resmin tek bir sütunu şişirip grid'i bozmasını önler.
Grid sistemi ile CSS Grid aynı şey mi?
Hayır. Grid sistemi bir tasarım kararıdır: kaç sütun, ne kadar boşluk, hangi genişlikte nasıl davranış. CSS Grid ise bu kararı uygulayabileceğiniz tarayıcı özelliklerinden biridir; aynı grid sistemi Flexbox ile veya bir framework'ün sınıflarıyla da kurulabilir. Spacing için tutarlı bir taban birim (örneğin 4 veya 8 pikselin katları) seçmek de çoğu zaman grid sisteminin parçası sayılır ve bir tasarım sistemi içinde belgelenir. Grid bir kural kitabı değil, bir referanstır; bir görselin kenara kadar taşması gibi bilinçli istisnalar, grid sağlam olduğunda daha etkili görünür.