CSS Grid ile Duyarlı Tasarım

CSS Grid ile Duyarlı Tasarım: Modern Web Tasarımının Anahtarı

Web tasarımı gün geçtikçe daha karmaşık hale gelirken, sayfaları düzenlemek ve düzeni korumak giderek önem kazanıyor. Bu noktada, CSS Grid, tasarımcılara güçlü bir araç sunuyor. CSS Grid, sayfaları daha kolay, düzenli ve duyarlı hale getirmek için kullanılan bir düzen sistemidir. Bu makalede, CSS Grid’in nasıl kullanıldığını ve duyarlı tasarımın neden bu kadar önemli olduğunu ele alacağız.

CSS Grid Nedir?

CSS Grid, HTML belgesindeki öğeleri düzenlemek için kullanılan bir düzen sistemidir. Sayfaları satır ve sütunlara ayırarak öğelerin yerleşimini kontrol etmeyi sağlar. Flexbox gibi diğer düzen sistemleriyle karşılaştırıldığında, CSS Grid daha gelişmiş bir kontrol sağlar ve kompleks düzenler oluşturmak için daha uygundur.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
}

Yukarıdaki örnekte, display: grid; özelliği sayesinde bir grid container oluşturuyoruz. grid-template-columns, sütunları belirlerken repeat(3, 1fr) ifadesiyle 3 eşit genişlikte sütun oluşturuyoruz. grid-gap ile sütunlar arasındaki boşluğu ayarlıyoruz. 1rem kabaca 16px’ e karşılık geliyor diyebiliriz. Son olarak, justify-content ve align-items ile içeriği ortalamak için kullanıyoruz. Ya da daha esnek bir grid yapı kurmak istiyorsak ;

grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),2fr));
/*repeat(kolon/satır sayısı, istediğimiz kolon genişliği);*/

yukarıdaki gibi bir değişiklik yapabiliriz. Bu kodu aklınızda iyi çözerseniz ekstradan farklı boyuttaki her cihaz çözünürlüğü için @media query kurmak zorunda kalmayabilirsiniz ancak şu an için mobil, tablet, geniş ekran olarak yaklaşım en ideali diyelim. Yukardaki tek satırlık kodun açıklaması özetle; container classına sahip elemanın altında kalan birincil elemanlar için, kaç tane eklenirse eklensin, ekran çözünürlüğüne göre min: 10rem genişlikte olacak şekilde tek satıra sığdıracaktır, ekran çözünürlüğünü aşarsa alt satıra otomatik geçer.

Duyarlı Tasarım ve Mobil Uyumlu Grid

Duyarlı tasarım, web sitelerinin farklı cihazlarda ve ekran boyutlarında düzgün görünmesini sağlama yaklaşımıdır. Mobil cihazların yaygın kullanımıyla birlikte, duyarlı tasarım olmaksızın kullanıcı deneyimi ciddi şekilde etkilenebilir. CSS Grid, duyarlı tasarımı desteklemek için mükemmel bir araçtır.

@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

Yukarıdaki örnek, ekran genişliği 768 piksel veya daha küçük olduğunda sütun sayısını bir olarak değiştirir. Bu, mobil cihazlarda daha iyi bir kullanıcı deneyimi sağlar. Media query kullanarak, farklı ekran boyutlarına özel düzenlemeler yapabilir ve sitenizi her türlü cihaza uygun hale getirebilirsiniz. Tabii ki bir önceki kod alanında yaptığımız grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),2fr)); şeklinde ki düzenleme varsa bu işleme gerek olmayabilir.

Aşağıdaki örnek üzerinde değişiklikler yapıp eş zamanlı görebilir ve aklınızda daha kalıcı olmasını sağlayabilirsiniz. (Sağ üst köşedeki EDIT ON … yazan kısma tıklayıp açabilirsiniz)

See the Pen Responsive Grid Layout by Harun Kocaman (@webdoktoru) on CodePen.

Avantajları ve Kullanım Senaryoları

CSS Grid’in kullanımının yaygınlaşmasının birçok nedeni vardır. İşte bu düzen sistemini tercih etmenin bazı avantajları ve kullanım senaryoları:

1. Kolay Anlaşılır ve Kullanımı Basit: CSS Grid, öğelerin yerleşimini daha açık ve anlaşılır bir şekilde belirlemenizi sağlar. Bu nedenle, tasarımcılar ve geliştiriciler arasında iletişimi güçlendirir.

2. Karmaşık Düzenler İçin İdeal: CSS Grid, karmaşık düzenler oluşturmak için mükemmel bir seçenektir. Özellikle büyük uygulamalar ve veri tabanlı sayfalar için uygun bir çözümdür.

3. Duyarlı Tasarım İçin Uygun: Mobil uyumlu ve duyarlı tasarım, günümüzde vazgeçilmez bir gerekliliktir. CSS Grid, bu ihtiyaca uygun düzenlemeler yapmayı kolaylaştırır.

4. Web Uygulamalarında Güçlü Performans: Web uygulamalarının karmaşık düzenlerine ihtiyaç duyduğu yerlerde, CSS Grid kullanarak performansı artırabilir ve daha düzenli bir kod oluşturabilirsiniz.

5. Okunabilir ve Temiz Kod: CSS Grid, düzeni açık bir şekilde tanımlayabilmenizi sağlar. Bu, hem tasarım hem de geliştirme süreçlerini daha anlaşılır ve bakımı daha kolay hale getirir.

Dezavantajları

Tarayıcı Uyumluluğu: Modern tarayıcılarda geniş bir destek bulsa da eski tarayıcılar tam uyumlu olmayabilir. Bu, projelerin eski tarayıcılar için özel düzenlemeler yapma ihtiyacını ortaya çıkarabilir.

Öğrenme Süreci: CSS Grid’in karmaşıklığı, özellikle yeni başlayanlar için öğrenme sürecini artırabilir. Ancak, bir kez kavrandığında, tasarımcılar ve geliştiriciler için güçlü bir araç haline gelir.

Fazla Kontrol İhtiyacı: Daha basit düzenler için bunu kullanmak, gereksiz karmaşıklık yaratabilir. Basit bir sayfa düzeni için Flexbox veya diğer yöntemler daha uygun olabilir.

Responsive Tasarım Zorlukları: Bazı durumlarda, özellikle karmaşık düzenlerde, responsive tasarımı başarıyla uygulamak zor olabilir. Farklı ekran boyutlarına uygunluğu sağlamak için dikkatli planlama gerekebilir.

Ekstra CSS Kodu: Bazı durumlarda ekstra CSS kodu yazmanızı gerektirebilir. Bu da projelerin dosya boyutunu artırabilir. Ancak, genellikle bu artış, getirilen avantajlara değer katar.

Sonuç

Modern web tasarımının vazgeçilmez bir aracıdır. Karmaşık düzenler oluşturmak, duyarlı tasarımı desteklemek ve web uygulamalarınızı güçlendirmek için ideal bir çözüm olmasına rağmen yeni başlayanlar için zor olabilir. Bu makalede, CSS Grid’in temel kullanımını ve duyarlı tasarım ile nasıl birleştirilebileceğini inceledik. İleri düzeyde tasarımlar oluşturmak ve web sitelerini daha işlevsel hale getirmek isteyen tasarımcılar ve geliştiriciler için CSS Grid, vazgeçilmez bir araçtır diyebiliriz.

Ekstra Faydalı Kaynak : https://css-tricks.com/introduction-fr-css-unit/