Yazar: suat 29 Aralık 2023

Web tasarımında “Fluid Grid” nedir ve nasıl kullanılır?

Fluid Grid, web tasarımında kullanılan bir tekniktir ve web sayfalarını farklı ekran boyutlarına ve cihazlara uyumlu hale getirmek için kullanılır. Bu teknik, sayfa öğelerini oranlı bir şekilde ölçeklendirerek, ekran genişliğine dinamik olarak uyum sağlar. Fluid grid, responsive web tasarımın temel unsurlarından biridir ve kullanıcılara farklı cihazlarda rahat bir deneyim sunmayı amaçlar.

Fluid grid’in temel özellikleri şunlardır:

1. Oranlı Yapı: Fluid grid, sayfa öğelerinin genişlik ve yüksekliğini oranlı bir şekilde belirler. Bu oranlar, sayfanın genişliği veya diğer öğelerle olan ilişkileri koruyarak sayfa boyunca tutarlı bir deneyim sağlar.
2. Media Queries ile Kombinasyon: Fluid grid, media queries ile birleştirilerek kullanılır. Bu sayede belirli ekran genişliklerinde farklı tasarım stilleri ve düzenlemeleri etkinleştirilebilir.
3. Esnek Kutu Modeli: Fluid grid, CSS’de kullanılan esnek kutu modelini benimser. Bu model, sayfa öğelerini yüzde cinsinden genişlik ve yükseklik değerleri kullanarak esnek hale getirir.

Fluid grid nasıl kullanılır:

1. HTML Yapısı:
   • Sayfanın HTML yapısında, sayfa öğeleri için yüzde cinsinden genişlik değerleri kullanarak esnek bir temel oluşturulur.
   htmlCopy code<div class="container"> <div class="row"> <div class="col-50">Öğe 1</div> <div class="col-50">Öğe 2</div> </div> </div>
2. CSS Stilleri:
   • CSS’de, esnek kutu modeli ve media queries kullanılarak sayfa öğelerine stil uygulanır. max-width veya min-width değerleri belirli genişliklerde farklı stil seçeneklerini etkinleştirebilir.
   cssCopy code.container { width: 100%; max-width: 1200px; /* Sayfa genişliğini sınırla */ margin: 0 auto; /* Sayfayı ortala */ } .row::after { content: ""; clear: both; display: table; } .col-50 { width: 50%; float: left; } @media screen and (max-width: 600px) { .col-50 { width: 100%; /* 600 piksel ve altında öğeleri tam genişlik yap */ } }
3. Responsive Davranış:
   • Fluid grid, farklı ekran genişliklerinde otomatik olarak uyum sağlar. Media queries ile belirlenen noktalarda sayfa düzeni veya öğelerde değişiklikler yapılır.

Fluid grid, özellikle responsive web tasarım projelerinde kullanılan etkili bir tekniktir. Bu sayede web sayfaları farklı cihazlarda rahatlıkla görüntülenebilir ve kullanılabilir. Bootstrap ve Foundation gibi CSS framework’leri, fluid grid prensiplerini içeren hazır bileşenler sunarak bu teknikleri kullanmayı kolaylaştırır.