grid.png- Css Grid (İzgara) Düzeni Temel Ozellikleri-cahitsoyman.blogspot.com
Bu makalede Css Grid Düzeni Temel Özellikleri hakkında bilgi vermeye çalışacağım. 

 Css Izgara Düzeninin, web için Flexbox tan farklı olarak iki boyutlu bir düzen sistemidir. Yani hem sütunda ve hem de satır boyutunda genişleme imkânı sunduğundan bu ünvanı kazanmıştır.

Grid Düzeninin temel özelliklerine baktıktan sonra, basit bir grid düzeni sayfası oluşturacağız.

Altta ki codepen örneğinde bir container içinde bazı alt öğeleri olan bir örnek görüyorsunuz. Defoult olarak bu öğeler birbirinin altında görüntülenir.

Şimdi bu örnek kod üzerinde değişiklikler yaparak Grid Düzenini daha iyi anlamaya çalışacağız.





Bir grid düzeni tanımlamak için kapsayıcı da görünümü grid yapmamız gerekmektedir. Böylece, ızgara düzeni açılır ve kapsayıcı içinde ki tüm alt öğeler ızgara öğeleri haline gelir.



.container {
       display:grid;
}


Bu kod bize bir sütun ızgarası verir, böylece öğeler birbirinin altında görüntülenmeye devam eder. Daha henüz ızgaraya benzer bir şeyler göremedik. Izgaraya benzer bir şeyler görebilmemiz için ızgaraya bazı sütunlar eklememiz gerekecektir.
Bu sütunları oluşturmak için herhangi bir yüzde veya uzunluk birimi girebiliriz. Bu sütunları oluşturmak için üste ki kod satırına px cinsinden uzunluk ekleyelim.



 .container {
        display:grid;
        grid-template-columns: 250px 250px 250px;
 }


Aşağıda ki gibi 3 sütun halinde 250 px genişliğinde sütunlarımızın oluştuğunu görmekteyiz. Ancak sayfamızı küçültüp baktığımızda responsive olmadığını görmekteyiz.






Yukarıda sütunlarımızı px ve yüzde cinsinden oluşturabildiğimizi söylemiştik. Bundan başka, fr kesir birimi ile de ızgara sıralarını ve sütunlarını esnek olarak oluşturabiliriz.

Şimdi, 3 adet fr kesir birimi oluşturarak px uzunluklarını aşağıda ki gibi değiştirelim.



 .container {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr ;
  }



Ve tarayıcımız da baktığımızda görüntünün, yukarıda ki görüntünün aynısı olduğunu ancak sayfamızı küçülterek baktığımızda 3 adet esnek sütunlara sahip olduğumuzu görüyoruz.

Fr kesir birimine farklı farklı değerler verdiğimizde ise, sütunlarımızın kapsayıcı içinde orantılı olarak dağıldığını görürüz.

Yukarıda ki kodumuz da ortada ki fr birimini değiştirerek aşağıda ki gibi yapalım ve görüntülüyelim.



 .container {
        display:grid;
        grid-template-columns: 1fr 2fr 1fr ;

 }







Görüldüğü gibi, sırada ki ilk ve son sütün tek fr birimi alırken ortada ki sütun ise 2 fr birim olarak genişlemiştir. Fr kesir birimi, kullanılabilir alanı dağıttığı için sütunlarımızın birinin içinde daha büyük yer kaplayan bir şey varsa, diğer sütunlara kullanılabilir alanda daha az yer kalacaktır.

 Aşağıda ki örnekte de, pixel ile kesir birimleri birlikte kullanılmaktadır. İlk sütun parçamız 400px olduğundan; bu sabit 400px genişlik, kullanılabilir alandan alındıktan sonra, kalan alan 3kesir birimine bölünerek 1fr ve 2fr olarak yerleştirilir.


 .container {
        display:grid;
        grid-template-columns: 400px  1fr 2fr ;
       grid-gap:1em;
}



Sütunlar arasında boşluklar oluşturmak için  ızgara-sütun-boşluk kodunu, satırlar arasında boşluklar oluşturmak için ise  ızgara-satır-boşluk kodunu kullanırız.

Hem sütun ve hem de satırlarda boşluk bırakmak için yukarıda ki iki kod yerine, kısa yoldan  grid-gap kodunu da kullanabiliriz.

Boşluk verirken fr birimi haricinde herhangi bir yüzde veya uzunluk birimi kullanabiliriz.





                                                                                                             
                                                                                                  Devam edecek...