CSS Grid Eğitimi

"Bir varmış bir yokmuş. Evvel zaman içinde web sitesi yapanlar HTML 'de tablo yapısını kullanarak sayfa planı çıkartırlar ve içini doldurmakla uğraşırlarmış. Sayfaya koyacakları öğeler için tablo satır ve sütunlarını şekil vermek için akla karayı seçerlermiş. Dikey olarak bir öğeyi ortalamak, eşit yükseklikte satırlar yapmak ise tam bir işkenceye dönermiş. " dersem inansanız iyi olur. Çünkü bir zamanlar bu şekilde web siteleri yapılıyordu. Ne yazık ki mi desem yoksa iyi ki görmüşüm mü desem bilemedim ama o zamanları gördüm.

CSS bir süre önce sayfa planını HTML’den aldı. Tablolar yerine, float kullanımı ve position değerleri gibi şeylerle sayfa planları oluşturduk ancak bazı konularda yine de; dikey de ortalama, eşit yükseklikte kolonlar vb sayfalar.. v.b. oluşturmak gibi ihtiyaçlar için farklı çözümler denememiz gerekti. Tüm bunlara rağmen CSS bu konuda bayağı yol kat etti.

Bir zaman sonra flex (CSS Flexbox) ile bu sorunların bazılarına çözümler bulduk.

Sayfa planları bir çerçeve içine alınacak ve basitçe çözülecek yapılar değildir. W3C sonuçta çok farklı tiplerdeki sayfa planlarını kapsayacak bir çözümler aradı diyebiliriz. Responsive web kavramının gelmesiyle (hani şu farklı cihazlarda sayfanın güzel görüntülenmesi olayı varya işte o) birlikte zorluk derecesi daha da arttı. Artık esnek yapılı sayfa planlarını da kapsayan çözümler gerekiyordu. Bu sorunları çözmek için çeşitli standartlar geliştirildi. Son çıkan çözüm ise CSS Grid.

Sayfa planlama konusunda grid ile birlikte önemli kazanımlarımız oldu. Bunların başında float ve flex ile devam eden tek eksenli sayfa planlamaları yerine iki eksenli sayfa planlamasını yapabiliyoruz.

İki eksenli sayfa planlamayı en son tablo ile sayfa planı oluştururken kullanıyorduk. Tekrar iki eksenli sayfa planlama metoduyla sayfalarımız kurgulamamız gerekiyor. Bu tek eksenli planlamaya göre büyük kolaylıklar sağlıyor. Bu arada aklınıza tablo ile iki eksenli sayfa planı yapıyorduk niye grid’e gerek var demeyin. Tablo yapıları çok sabit yapılardı esnek ve üzerine geçen sistemler için çok uygun değildi.

İki eksenli sayfa planlamanın responsive web geliştirmelerinde büyük kolaylığı var. Örneğin mobilde en alt sırada olan bir öğeyi masaüstünde sağ üste koymak grid öncesinde zordu. İki eksenli sayfa planından sayfadaki tüm ögeler ve sıralaması HTML’deki yerinden bağımsız şekilde sıralanabiliyor ve farklı özellikleri tanımlanabiliyor.

Tüm interneti düşününce tüm sayfa planlarına çözüm bulmak çokta kolay bir şey değildir. Grid bunu yapmak için ortaya çıktığı için anlaşılması diğer CSS özelliklerine göre nispeten daha zor bir konu oldu. İş karmaşık olunca haliyle çözümü de biraz karmaşıklaşıyor. Basit sayfa planlarını yapmak için basit iki satırlık kodlar yeterli olurken karmaşık sayfa planlarını oluştururken biraz işin inceliklerini bilmek gerekiyor.

İşte bu noktada CSS Grid Eğitimi ile temel atmaya başlıyoruz. Eğitim başlangıç seviyesindedir. Eğitimde temel kavram, yapı ve özellikleri anlatmaya çalıştım.

Aşağıdaki başlıklarda CSS Grid derslerini işliyor olacağım.

• Grid Tanımı ve Terimleri

• Grid Container Yapısı ve Özellikleri

• Grid Öğeleri ve Özellikleri

• Grid ile Örnek Uygulama Yapımı