Modern ve Esnek CSS Grid İle Tasarlanmış Responsive Web Sayfası Örneği

Bu örnekte, HTML ve CSS Grid kullanarak bir responsive web sayfası tasarlandı. Sayfa, başlık, altbilgi ve esnek sütunlu bir ana içerik bölümü içeriyor. CSS Grid, sütun sayılarını ve boyutlarını belirleyerek sayfanın farklı ekran boyutlarına uyumlu olmasını sağlıyor. Ekran genişliği 768 piksele kadar olan durumda, sayfa düzeni tek sütuna geçiyor, bu da küçük ekranlara uygun bir görünüm sağlıyor. Bu tasarım, kullanıcıların farklı cihazlarda rahatça gezinebilmeleri ve içeriği anlayabilmeleri için optimize edilmiştir. Başlık ve altbilgi, sayfanın estetik görünümünü tamamlarken, esnek sütunlar içerisindeki ana içerik bölümü, içeriğin düzenli bir şekilde sunulmasını sağlar. Responsive tasarımın sağladığı bu esneklik, kullanıcı deneyimini iyileştirir ve sayfanın herhangi bir ekran boyutunda şık ve düzenli görünmesini sağlar. Bu da ziyaretçilerin web sayfasını herhangi bir cihazda rahatça kullanabilmelerini garanti eder.

Grid Örneği

1. Grid Konteyneri Oluşturma:
   • .grid-container sınıfı, grid konteynerini oluşturur.
   • display: grid; özelliği, bu konteynerin bir grid olduğunu belirtir.
2. Sütun Sayısını Belirleme:
   • grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); özelliği ile sütun sayısını belirler.
   • auto-fit değeri, sütun sayısını otomatik olarak belirler.
   • minmax(300px, 1fr) ile sütunların minimum 300 piksel, maksimum 1 fr genişliğinde olmasını sağlar.
3. Sütunlar Arasındaki Boşlukları Ayarlama:
   • gap: 20px; özelliği ile sütunlar arasındaki boşluğu belirler.
4. Grid Öğesi Stilleri:
   • .grid-item sınıfı, her bir grid öğesini temsil eder.
   • background-color, padding, ve text-align özellikleri ile öğelerin stilini belirler.
5. Medya Sorgusu Kullanma:
   • @media (max-width: 768px) { ... } ile ekran genişliği 768 piksele kadar olan durumu hedefler.
   • Bu durumda, .grid-container'ın sütun sayısını bir olarak ayarlar.

Detaylı Grid Örneği

Modern Grid Örneği

Renkli Grid Örneği