CSS ızgarasından yararlanın

Alex Danilo

Bir Web Uygulaması oluştururken gereken ilk şeylerden biri, uygulamanızın içeriğini yerleştirmenin bir yoludur.

Pek çok tasarımcı, bir site veya uygulama için olması fark etmeksizin, içeriği yerleştirmek için hayali ızgaralar kullanır. CSS grubu, düzenleri kolaylaştırmak için yoğun bir şekilde çalışmaktadır ve bunun bir parçası olarak, artık tarayıcılarda yeni ortaya çıkan CSS Grid Layout Module'u üretmiştir.

Bu özellik, Chrome'da deneysel işaretiyle denenebilir. Ayrıca sürüm 10'dan itibaren IE'de de kullanılmaya başlandı ve büyük olasılıkla yakında çoğu tarayıcıda da kullanılabilecek.

Yönetici özeti

  • CSS Izgara Düzeni, düzeniniz için satırlar ve sütunlar tanımlamanızı sağlar
  • Izgaralar mevcut alandan yararlanacak şekilde uyarlanabilir
  • İçerik sırası, tablo kapsayıcısı görüntüleme sırasından bağımsız olabilir
  • Düzenler medya sorgularına göre değişebileceği için duyarlı tasarımı kolaylaştırır
  • İçerik çakışabilir (diğer yöntemlerle mümkün olmayan düzen etkinleştirilir)
  • Izgara Düzeni hızlı

CSS Izgara Düzeni'nin işleyiş şekli hakkında birçok bilginin yer aldığı genel bakış videosunu burada bulabilirsiniz (slaytları burada bulabilirsiniz:

Deneyin

Chrome'da CSS Izgara Düzeni'ni kullanmak artık çok kolay. Özelliği etkinleştirmek için ilk olarak deneysel işaretini açmanız gerekir.

Öncelikle chrome://flags URL'sini yükleyin ve aşağıda gösterildiği gibi Deneysel Web Platformu özelliklerini etkinleştir seçeneğine ilerleyin:

Deneysel bayrak seçeneğinin resmi

İşareti açmak için Etkinleştir'i tıklamanız yeterlidir. Tarayıcıyı yeniden başlatma istemi şu şekilde görünür:

Yeniden başlat düğmesinin resmi

Artık tarayıcınızı yeniden başlatmak için Şimdi Yeniden Başlat düğmesini tıklayın. Böylece CSS Grid Layout'u denemeye hazır olursunuz.

Düşüncelerinizi bizimle paylaşın

CSS Grid Layout, web içeriği için harika bir yeni temel öğedir, ancak her zamanki gibi hepimiz geliştiricilerin bu konudaki düşüncelerini öğrenmek isteriz. Geri bildirimde bulunmanın pek çok yolu vardır. Buraya bir yorum bırakın, konu satırına "[css-grid]" yazan W3C CSS Çalışma Grubu listesine posta gönderin, hataları günlüğe kaydedin veya blog'da düşüncelerinizi tweet olarak gönderin. Bu süper kullanışlı yeni özellikle oluşturduğunuz mükemmel düzenleri görmeyi sabırsızlıkla bekliyoruz.