Grid sistemleri, web tasarımında kullanılan düzenli bir yapıdır Bu sistem, önceden belirlenmiş sütun ve satırlar aracılığıyla içeriği düzenlemeye olanak tanır Grid sistemleri, XS, SM, MD, LG ve XL boyutlarına sahiptir XS boyutu, mobil cihazlar için en küçük boyuttur ve genellikle tek sütunlu bir düzenle tercih edilir SM boyutu, küçük tabletler ve ekran boyutları için uygundur ve genellikle 2 ya da 3 sütunlu bir düzen tercih edilir MD boyutu, orta boyutlu tabletler ve ekranlar için uygundur ve genellikle 3 ya da 4 sütunlu bir düzen tercih edilir LG boyutu, büyük tabletler ve ekran boyutları için uygundur ve genellikle 4 ya da 5 sütunlu bir düzen tercih edilir XL boyutu, büyük ekran boyutları için uygundur ve genellikle 5 ya da daha fazla sütunlu bir düzen tercih edilir Grid sistemi
CSS'de en yaygın kullanılan grid sistemleri XS, SM, MD, LG ve XL boyutlarına sahiptir. Bu boyutlar, web sayfaları için düzenli bir tasarım oluşturmaya yardımcı olur. Grid sistemleri, içerikleri önceden belirlenmiş satırlar ve sütunlar halinde düzenlemeye olanak tanır.
XS boyutu en küçük boyuttur ve genellikle mobil cihazlar için kullanılır. Bu boyutta tek sütunlu bir düzen sıklıkla tercih edilir. SM boyutu küçük tabletler ve ekranlar için uygundur ve genellikle 2 ya da 3 sütunlu bir düzen oluşturulur. MD boyutu, orta boyutlu tabletler ve ekranlar için uygundur ve genellikle 3 ya da 4 sütunlu bir düzen tercih edilir. LG boyutu ise büyük tabletler ve ekranlar için uygundur ve genellikle 4 ya da 5 sütunlu bir düzen kullanılır. XL boyutu ise büyük ekranlar için uygundur ve genellikle 5 ya da daha fazla sütunlu bir düzen tercih edilir.
Grid sistemleri oldukça kolay kullanılabilir. İlk olarak bir container divi oluşturulur ve daha sonra sütunlar belirlenir. İçerikler sütunların içerisine yerleştirilir. Bu sistem hem tasarımcılar hem de geliştiriciler için kullanışlıdır ve her boyutta optimize edilebilir.
Grid İşlemleri Nedir?
Web sayfalarında düzenli bir tasarım oluşturmak oldukça önemlidir. Grid sistemi, sayfaların bu düzenli yapısını oluşturmak için kullanılan bir yapıdır. Bu sistemde belirlenen sütun ve satırlara göre içerikler yerleştirilir. Bu sayede sayfalar düzenli ve okunaklı bir yapıya sahip olur.
Grid sistemi, sürükle-bırak yöntemi gibi kolayca kullanılabilen bir yapıdır. Öncelikle bir container divi oluşturulur. Bu divin üzerinde sütunlar belirlenir ve içerik bu sütunlara yerleştirilir. Hem mobil cihazlarda hem de masaüstü cihazlarda düzenli bir tasarım elde etmek için grid sistemi kullanımı oldukça önemlidir. Farklı ekran boyutlarına uygun olarak sayfalar tasarlanabilir ve sayfa içerisindeki öğelerin yerleşimleri değiştirilebilir.
Boyutlar Nelerdir?
Web tasarımında, her cihazın farklı bir ekran boyutu olduğu düşünüldüğünde, grid sistemlerinde kullanılan belirli boyutlar önemlidir. XS, SM, MD, LG ve XL boyutları, grid sistemlerinde kullanılmak üzere tanımlanmış çeşitli boyutlardır. Bu boyutlar, farklı ekran boyutlarına uygun tasarım yapılmasını mümkün kılar.
XS boyutu en küçük boyuttur ve genellikle mobil cihazlar için kullanılır. Bu boyutta tek sütuna sahip bir düzen tercih edilir. SM boyutu, küçük tabletler ve ekran boyutları için uygundur ve genellikle 2 veya 3 sütunlu bir düzen tercih edilir. MD boyutu orta büyüklükteki tabletler ve ekran boyutları için uygundur ve genellikle 3 veya 4 sütunlu bir düzen tercih edilir. LG boyutu büyük tabletler ve ekran boyutları için uygundur ve genellikle 4 veya 5 sütunlu bir düzen tercih edilir. XL boyutu ise büyük ekran boyutları için uygundur ve genellikle 5 veya daha fazla sütunlu bir düzen tercih edilir.
Grid sistemi, web sayfalarının düzenli bir şekilde tasarlanmasına yardımcı olan bir yapıdır. Bu yapı, önceden belirlenmiş sütunlara ve satırlara sahip bir düzeni takip eder. Belirli boyutlardaki sütunlar konumlarına göre düzenlenerek içerikler bu sütunlara yerleştirilir. Bu şekilde, web sayfaları daha düzenli ve okunaklı hale getirilir.
XS
=XS boyutu, mobil cihazlar için en küçük boyuttur ve genellikle tek sütunlu bir düzen tercih edilir. Bu boyutta, içeriklerin tek sırada yer alması, kullanıcının küçük ekranı üzerinde daha rahat bir deneyim yaşamasını sağlar.
XS boyutu için grid sistemi kullanılırken, her bir sütunun genişliği %100 olmalıdır. Bu, içeriklerin mobil cihazlarda yan yana sıkışık bir şekilde görünmesini engeller. Örneğin, bir kolon içinde metin, diğer kolonda resim yer alabilir.
Bunun yanı sıra, XS boyutunda font büyüklükleri ve satır aralıkları da gözden geçirilmelidir. Küçük ekranlarda okunabilirliği sağlamak adına font büyüklükleri ve satır aralıkları küçültülebilir.
SM
SM boyutu, küçük tabletler ve ekran boyutları için uygundur. Bu boyutta, genellikle 2 veya 3 sütunlu bir düzen tercih edilir. Küçük ekranlarda kullanıcıların rahatça gezinebilmesi için sayfa düzeninin responsive olması oldukça önemlidir. SM boyutu bu noktada kullanıcılara yardımcı olur. Grid sistemleri, tasarımcılara bu boyutlara göre bir sayfa düzeni hazırlama imkanı sunar.
SM boyutunda, genellikle ana içerik sütunu yanında yan sütunların yer aldığı bir tasarım tercih edilir. Bu sayede küçük ekranlarda bile içeriğin okunabilirliği artar. SM boyutunun en çok kullanıldığı alanlardan birisi de e-ticaret siteleridir. Ürünlerin listelendiği sayfalarda, filtreleme seçenekleri veya yan sütunlarda diğer ürünler gösterilebilir. Bu sayede kullanıcılar, daha kolay bir şekilde aradıkları ürünlere ulaşabilirler.
SM boyutunun kullanımı, web tasarımında büyük bir önem taşır. Bu boyutun doğru bir şekilde kullanılması, web sayfanızın görünümünü olumlu yönde etkileyerek kullanıcı deneyimini artırabilir. SM boyutu, sadece küçük tabletler için değil, aynı zamanda değişken ekran boyutlarına sahip tüm mobil cihazlar için uygun bir seçenektir. Bu nedenle tasarımcılar, sayfa düzenlerini oluştururken SM boyutunu mutlaka göz önünde bulundurmalıdır.
MD
Orta boyutlu tabletler ve ekran boyutları için kullanılan grid yapısı, MD boyutu olarak adlandırılır. Bu boyutta, genellikle 3 veya 4 sütunlu bir düzen tercih edilir. Bu sayede, sayfa içeriği daha geniş bir alanda gösterilebilir ve kullanıcılar daha rahat bir deneyim yaşayabilirler.
MD boyutunda, sütunların genişliği genellikle eşit olarak dağıtılır. Böylece, sayfadaki içerik daha dengeli görünür ve kullanıcılar sayfayı daha kolay tarayabilirler. MD boyutu tercih edilirken, sayfanın genişliği de dikkate alınmalıdır. Eğer sayfa genişliği yeterince büyük değilse, 3 sütunlu bir düzen daha uygun olabilir.
MD boyutunda kullanılan sütun sayısı, sayfadaki içeriğin miktarına bağlı olarak değişebilir. Örneğin, bir blog sayfasında 3 sütunlu bir düzen, içeriğin daha fazla görüntülendiği bir ürün sayfasında ise 4 sütunlu bir düzen tercih edilebilir.
LG
LG boyutu, geniş ekranlı tabletler ve büyük ekranlı cihazlar için uygundur. Bu boyutta genellikle, 4 veya 5 sütunlu bir grid tercih edilir.
Bir örnek olması açısından, bir LG boyutunda 5 sütunlu bir grid yapısı kullanabilirsiniz. Bu sayede geniş ekranlı cihazlarda içerikleriniz daha düzenli bir şekilde görünebilir. LG boyutunda, genişlikleri 20%, 20%, 20%, 20% ve 20% olan 5 sütun belirleyebilirsiniz.
| Sütun 1 | Sütun 2 | Sütun 3 | Sütun 4 | Sütun 5 |
Bu şekilde belirtilen sütunlar, içeriğinizi daha dengeli olarak gösterebilir ve okuyucularınızın içeriğinizde kaybolmadan bulmasına yardımcı olabilir.
LG boyutunda tasarım yaparken, cihazların ekran boyutlarına dikkat etmek önemlidir. Bu, içeriklerinizin her cihazda gözükür ve okunabilir olmasını sağlayacaktır.
XL
XL boyutu, çok büyük ekran boyutları için uygundur. Bu boyutta, genellikle 5 veya daha fazla sütunlu bir düzen tercih edilir. Büyük boyutlu cihazları kullanan kullanıcılar, web sitelerinde geniş alanlarda gezinmek isteyebilirler. Bu nedenle, ekranların büyüklüğüne bağlı olarak, XL boyutu bu tür kullanıcılar için optimum bir kullanıcı deneyimi sağlayabilir.
XL boyutunda, sayfayı dört veya beş sütuna ayırmak yaygın bir şekilde kullanılmaktadır. Bu sütun düzenleri, ekranın genişliğine göre belirlenir ve içerik bu sütunların içerisine yerleştirilir. Bu düzen, özellikle çok sayfalı web sitelerinde aradığınız içeriği hızlı bir şekilde bulmanızı sağlayabilir.
Ayrıca, XL boyutunda geniş tasarım alanları kullanmak isteyen birçok tasarımcı, bu boyutu tercih etmektedir. Bu nedenle, web sitenizin tarzı ve gereksinimlerine bağlı olarak, XL boyutu mümkün olan en iyi seçenek olabilir.
Grid İşlemleri Nasıl Kullanılır?
Grid işlemleri CSS'de kullanımı çok kolay olan bir yapıdır. İlk olarak, bir container divi oluşturulur. Bu container divi, sayfanın içindeki tüm sütun ve satırların bir çerçevesi gibi çalışır. Ardından sütunlar belirlenir ve içerik bu sütunların içerisine yerleştirilir.
Bir sütun, genellikle % değerleriyle belirtilen bir genişliğe sahiptir. Sütunların genişliklerinin toplamı, container divinin genişliğine eşit olmalıdır. Sütunlar, float özelliği ile yan yana hizalanabilir. Bu sayede, sütunlar arasında boşluk oluşmaz ve sayfa tasarımı düzenli ve şık bir görünüme kavuşur. Ayrıca, sütunların içerisine yerleştirilen içerikleri dilediğimiz gibi konumlandırabilir ve stil özellikleri ekleyebiliriz.
Bazı durumlarda, sütunların içerisindeki içerik, diğer sütunlara göre daha yüksek olabilir. Bu durumda, sütunlar arasında boşluk oluşur ve sayfa tasarımı bozulabilir. Bu sorunu çözmek için, clearfix özelliği kullanılabilir. Clearfix özelliği, sütunların içerisindeki yüksekliği ayarlar ve sütunlar arasında boşluk oluşmasını engeller.
Grid işlemlerinin kullanımı oldukça esnektir ve tasarımın dinamik olmasını sağlar. Sayfanın ekran boyutuna göre farklı tasarımlar yapılabilir ve responsivite sağlanabilir. Grid işlemlerini kullanarak, web sitelerimizi daha şık ve profesyonel görünüme kavuşturabiliriz.