Css Grid Örnek ile anlatım
Css Gridden bahsetmeden önce display:flex hakkında biraz bilgi vermek istiyorum. display flex içerisinde elementlerin bulunduğu container elemente display:flex özelliğinin verilmesi ile altındaki bütün elementlerin dikey yada yatay eksende aynı hizzada olmasını sağlar.(flex-direction:row / column)
Css flexbox aslına bakılırsa bir çok ihtiyaca cevap verebliyor ancak bu özellik sadece tek bir yönde etkili ve hangi item’a nerede bulunması gerektiğini tam olarak belirtemiyoruz. o bulunduğu kapsayıcı elemntin içerisinde dikey yada yatay olarak sıralanıyor.
İşte css grid burada ihtiyaçlara cevap veriyor. Tek bir doğrusal yönde değil hem yatay hem dikey doğrultuda ihtiyaçlarımıza cevap veriyor.
İlk olarak css-flexbox’ta olduğu gibi kapsayıcı elementin classına display:grid özelliğini atıyoruz.
grid-template-rows ve columns özellikleri ise bizim gridimizin kaç satır ve sütündan ve bunların genişlik ve yüksekliklerini belirtiyor.
grid-template-areas ise bizim her bir hücremize denk gelen takma isimler (.) ile belirtilenler boş olduğu anlamına geliyor.
html içerisindeki itemların grid-area özelliğine yukarıdaki template namelerini verdiğimizde artık o item istenilen hücrede bulunabilir.
Buradaki codepen örneğinde olduğu gibi istenilen elemente atanın grid-area özelliği ile istediğiniz yerde durabilir.
Academind ve Traversy Media nın örneklerini de izlemenizi tavsiye ederim.
