Css Grid Sistemi Nedir?
Web tasarımı, günümüzde giderek önem kazanan bir alan haline gelmiştir. İnternet kullanıcılarının sayısı arttıkça, web sitelerinin görünümü ve kullanılabilirliği de büyük bir önem kazanmıştır. Bu nedenle, web tasarımında kullanılan araçlar ve teknikler de giderek gelişmektedir.
CSS Grid sistemi, web tasarımında son yıllarda popüler hale gelen bir tekniktir. Bu sistem, web sayfalarının düzenlenmesini kolaylaştırmak için kullanılan bir CSS modülüdür. Grid sistemi, sayfadaki öğelerin konumlarını ve boyutlarını belirlemeye yardımcı olur.
Grid sistemi, satırlar ve sütunlardan oluşur ve her hücrenin belirli bir konumu ve boyutu vardır. Web geliştiricileri, bu ızgara yapısına dayalı olarak, sayfadaki her öğenin nerede yer alması gerektiğini belirleyebilirler. Bu sayede, web sayfasının düzeni daha kolay bir şekilde oluşturulabilir.
CSS Grid, responsive tasarımlar oluşturmak için de son derece yararlıdır. Responsive tasarım, farklı cihazlarda doğru şekilde görüntülenen bir web sitesi oluşturmak anlamına gelir. Grid sistemi sayesinde, farklı ekran boyutlarına uygun olarak değişen sayfa düzenleri oluşturmak mümkündür.
Sonuç olarak, CSS Grid sistemi web tasarımında oldukça kullanışlı bir tekniktir. Bu sistem sayesinde, web sayfalarının düzenlenmesi kolaylaşır ve responsive tasarımlar oluşturmak daha da yaratıcı hale gelir.
Grid Sistemini Neden Kullanmalıyım?
1. Daha kolay sayfa düzeni oluşturma
Grid sistemi, web sayfalarının düzenlenmesini daha kolay hale getirir. Satırlar ve sütunlar arasındaki ızgara yapısı sayesinde, her öğenin konumu ve boyutu kolayca belirlenebilir. Bu da sayfa düzeninin daha tutarlı ve estetik görünmesini sağlar.
2. Responsive tasarımlar oluşturma
Responsive tasarım, web sayfalarının farklı cihazlarda doğru şekilde görüntülenmesini sağlamak anlamına gelir. Grid sistemi, responsive tasarımlar oluşturmak için son derece yararlıdır. Farklı ekran boyutlarına uygun olarak değişen sayfa düzenleri oluşturmak mümkündür.
3. Kod tekrarını azaltma
Grid sistemleri, kod tekrarını azaltır. Özellikle büyük web sitelerinde birden fazla sayfa düzeni oluşturmak için aynı kod tekrarlanabilir. Bu durumda, grid sistemi kullanarak ortak bir stil oluşturmak daha etkili ve hızlı bir yöntemdir.
4. Daha iyi okunabilirlik
Grid sistemi sayesinde, web sayfalarının okunabilirliği artar. Özellikle uzun makaleler veya blog yazıları gibi içerik yoğun sayfalarda, düzenli bir grid sistemi kullanarak okuyucunun gözü daha kolay yönlendirilebilir.
5. Tasarımın daha tutarlı olması
Grid sistemi, sayfa düzeninin daha tutarlı olmasını sağlar. Tüm öğelerin aynı hizada ve boyutta olması, sayfanın daha profesyonel ve iyi tasarlanmış görünmesini sağlar.
Sonuç olarak, Grid sistemini kullanmak, web sayfasının düzenlenmesini kolaylaştırır, responsive tasarımlar oluşturmayı kolaylaştırır, kod tekrarını azaltır ve tasarımın daha estetik görünmesini sağlar.
Grid Sistemi Nasıl Çalışır?
Grid sistemi, satırlar ve sütunlardan oluşan bir ızgara yapısı kullanır. Satırlar, sayfanın dikey çizgileridir ve sütunlar ise yatay çizgilerdir. Her hücrenin belirli bir boyutu ve konumu vardır.
Web geliştiricileri, html dosyalarında grid yapısını tanımlayarak, her bir öğenin hangi hücrede yer alacağını belirleyebilirler. Örneğin, bir logo sol üst köşede yer alacaksa, bu öğe “1. satır, 1. sütun” olarak tanımlanabilir.
Hücreler arasındaki boşluklar da belirlenebilir. Ayrıca, her bir hücrenin boyutu da belirlenebilir veya otomatik olarak ayarlanabilir.
Grid sistemi, responsive tasarımlar oluşturmak için de son derece yararlıdır. Farklı ekran boyutlarına uygun olarak değişen sayfa düzenleri oluşturmak mümkündür. Bu, mobil cihazlarda web sitenizin daha kullanılabilir olmasını sağlar.
Grid Sisteminde Kullanılan Terimler Nelerdir?
Bunu tabloyu görsel halinde veriyorum işine yarayacak olan çıktı alabilir.
Grid Sistemi İle Öğeleri Nasıl Düzenleyebilirim?
Şimdi yeni başlayanlara karmaşık gelebilir, bir örnek vereceğim mantığın anlaşılması açısından;
Öncelikle, HTML’de bir div etiketi oluşturarak içindeki öğeleri sarmalayın. Ardından, CSS'de display: grid; özelliği ile bu div etiketini bir grid konteynırına dönüştürün. Grid sistemini kullanarak öğeleri istediğiniz şekilde konumlandırabilirsiniz.
Bir örnek:
<div class="grid-container">
<div class="item-1">Öğe 1</div>
<div class="item-2">Öğe 2</div>
<div class="item-3">Öğe 3</div>
<div class="item-4">Öğe 4</div>
</div>.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item-1 {
grid-column: 1 / 3;
}
.item-2 {
grid-row: 1 / 3;
}
.item-3 {
grid-row: 2 / 4;
}
.item-4 {
grid-column: 2 / 3;
grid-row: 3 / 4;
}Burada, grid-template-columns özelliği iki sütun oluştururken grid-gap özelliği de öğeler arasında boşluk bırakır. Sonrasında her öğenin konumunu belirlemek için grid-row ve grid-column özellikleri kullanılıyor.
Yukarıdaki kod parçası, örneğin aşağıdaki gibi bir grid görünümü oluşturacaktır:
--------------------------
|| Öğe 1 || Öğe 2 | |
----------------| Öğe 4 ||
| |--------| |
| | Öğe 3 | |
| |--------| |
--------------------------Bu örnekte, item-1 öğesi ilk iki sütunda yer aldığı için grid-column: 1 / 3; olarak belirtiliyor. item-2 öğesi ilk iki satırda yer aldığı için grid-row: 1 / 3; olarak belirtiliyor. item-3 öğesi ise üçüncü ve dördüncü satırlarda yer alacağı için grid-row: 2 / 4; olarak belirtiliyor. item-4 öğesi ise ikinci sütunun üçüncü satırında yer aldığı için grid-column: 2 / 3; ve grid-row: 3 / 4; olarak belirtiliyor.
Basit bir örnekte grid sistemlerinin özelliklerini anlatayım.
Örneğimizde bir web sayfasının ana sayfasını ele alacağız. Sayfamızda bir üst bilgi bölümü (header), bir yan menü bölümü (sidebar) ve ana içerik bölümü (main content) olsun. Grid sistemleri, bu bölümleri kolayca düzenlemenize ve hizalamana olanak sağlar.
- Grid Container Tanımlama: Öncelikle HTML kodumuzda bir grid container tanımlamalıyız. Bunun için div etiketi kullanarak bir kapsayıcı oluşturuyoruz ve class adına “container” veriyoruz.
<div class="container">
</div>2. Grid Column Ekleme: Ardından her bir bölümün yerleşeceği sütunları belirtmeliyiz. Bu örnekte header bölümü sol tarafta, sidebar bölümü ara tarafta ve main content bölümü sağ tarafta yer alacak şekilde sırasıyla 3, 2 ve 7 sütuna ayıracağız. Bunun için “container” divi içine, sırasıyla “header”, “sidebar” ve “main-content” divleri ekliyoruz ve her bir div için de class adlarına sütun sayısını belirten bir ek yapıyoruz.
<div class="container">
<div class="header col-3">
<!-- Header içeriği -->
</div>
<div class="sidebar col-2">
<!-- Sidebar içeriği -->
</div>
<div class="main-content col-7">
<!-- Main Content içeriği -->
</div>
</div>3. Grid Özellikleri: Şimdi sütunlarımızı belirledikten sonra onları hizalamalıyız. Bunun için CSS kullanacağız. Grid sistemlerinde yaygın olarak kullanılan bazı özellikler şunlardır:
- display: grid; — Grid sistemi özelliğini uygular.
- grid-template-columns: repeat(12, 1fr); — 12 adet eşit genişlikte sütun oluşturur. Burada “repeat” özelliği ile sütun sayısı ve “1fr” ile de sütunların genişliği belirlenir.
- grid-gap: 20px; — Sütunlar arasında boşluk bırakır.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;
}
.header {
grid-column: 1 / span 3;
}
.sidebar {
grid-column: 4 / span 2;
}
.main-content {
grid-column: 6 / span 7;
}Burada “grid-column” özelliği ile her bir bölümün hangi sütunlarda yer alacağını belirtiyoruz. “span” özelliği ise kaç sütun genişliğinde olacağını belirler.
Bu örnek sayede web sayfası tasarımında grid sistemlerini kullanarak farklı bölümleri hizalamayı öğrenebilirsiniz. Ancak unutmayın, grid sistemleri kullanırken her zaman mobil cihazlarda da düzgün görüntülenmeyi sağlayacak responsive tasarım tekniklerini de kullanmalısınız.
@media (max-width: 767px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
.sidebar {
grid-column: 1 / span 1;
}
.main-content {
grid-column: 1 / span 1;
}
}CSS Grid İle İlgili Yararlı Kaynaklar
- MDN Web Docs: CSS Grid Layout = MDN Web Docs’un CSS Grid Layout bölümü, grid sistemleri hakkında detaylı bir rehberdir. Bu kaynak, grid sistemi özelliklerini, kullanımını ve pratik uygulamaları açıklamaktadır.
- CSS Tricks: A Complete Guide to Grid = CSS-Tricks’in “A Complete Guide to Grid” adlı makalesi, grid sistemleri hakkında kapsamlı bir rehberdir. Bu kaynak, grid sistemlerinin tarihçesi, temelleri, özellikleri, kullanımı ve pratik örnekleri hakkında ayrıntılı bilgi vermektedir.
- Grid by Example = Grid by Example, Rachel Andrew tarafından yönetilen bir proje ve CSS grid sistemleri konusunda öğretici bir kaynaktır. Bu kaynak, bir dizi öğretici videodan oluşur ve grid sistemleri hakkında detaylı bir kılavuz sunmaktadır.
- Mozilla Hacks Blog: CSS Grid = Mozilla Hacks Blog’un CSS Grid bölümü, grid sistemleri hakkında bilgilendirici ve pratiğe odaklı bir kaynak olarak değerlendirilebilir. Bu kaynakta, özellikle yeni başlayanlar için yararlı ipuçları ve örnekler sunulmaktadır.
- Smashing Magazine: Mastering CSS Grid = Smashing Magazine’in “Mastering CSS Grid” adlı kitabı, grid sistemleri hakkında derinlemesine bir bakış sunar. Bu kaynak, grid sistemleri ile ilgili temel kavramları, özellikleri ve kullanımı açıklamaktadır.
- CSS Grid Generator = Kullanıcıların CSS grid sistemleri oluşturmalarına yardımcı olan bir araçtır. Bu araçla, sütun sayısı, boyutları ve boşlukları ayarlanarak grid sistemleri kolayca oluşturulabilir.
