CSS Grid Layout -Bölüm 2
Herkese merhaba! Css grid üzerine yazdığım ilk yazıda bu konunun temel noktalarını değinmeye çalışmıştım. Bu ikinci yazıyla birlikte biraz daha detaylı inceleyeceğiz. Başlayalım!
Grid-Template-Areas
Kapsayıcı element ile kullanabildiğimiz bu özellik bizlere web sayfamızdaki elementleri isimlendirerek konumlandırmada kolaylık sağlıyor.
Yukarıdaki gibi bir html kodumuzun olduğunu düşünelim ve grid-template-areas özelliği ile web sayfamıza elementleri nasıl yerleştirebileceğimize bakalım.
Grid-template-areas özelliğini kapsayıcı elemente vererek hangi elementin nereye konumlanacağını belirliyoruz. Daha sonra ise kapsayıcı içerisindeki elementleri grid-area özelliği ile isimlendirerek konumlandırmak istediğimiz yerlere elementleri atamış oluyoruz. Aşağı da çıktıyı görebilirsiniz.
Justify Items
Bu özellik bizlere web sayfamızdaki elementleri kendi kutularının (block) içinde soldan sağa hizalamamızı sağlıyor. İçerisinde bulunduğu kutu boyunca elementimiz start değeri ile kutunun soluna, end değeri ile kutunun sağına, center değeri ile kutunun ortasına, ve stretch değeri ile bütün kutuyu doldurmamıza yardımcı oluyor.
Justify Content
Bu özellik birden fazla sütunda bulunan elementlerimizi kapsayıcısının içerisinde yatayda nasıl konumlandıracağımıza yardımcı oluyor. Start, end, center, stretch, space-between, space-around, ve space-evenly değerlerini alıyor. Görselde nasıl hizalandıklarını görebiliriz.
Align Items
Önceki iki özellik satır boyunca sağdan sola nasıl hizalayacağımıza yardımcı oluyordu. Bu özellik ise elementimizi bulunduğu kutu içerisinde dikeyde yukardan aşağıya ne şekilde hizalanacağına yardımcı oluyor. Aynı justify-items özelliğinde olduğu gibi start, end, center, ve stretch değerlerini alıyor.
Align Content
Kapsayıcı içerisinde birden fazla satırda bulunan elementlerimizi dikeyde hizalamamıza yardımcı oluyor. Start, end, center, stretch, space-between, space-around, ve space-evenly değerlerini alıyor. Yazılı olarak açıklamak yerine tek bir görselde bütün değerleri görmenin çok daha faydalı olacağını düşünüyorum :)
Justify Self ve Align Self
Justify-self tek bir elementi yatayda ve align-self tek bir elementi dikeyde konumlandırmamıza yardımcı oluyor. İkisi de görsellerde görüldüğü üzere start, end, center, ve stretch değerlerini alıyorlar.
Böylece css grid üzerine olan ikinci yazının sonuna geldik. Okuduğunuz için çok teşekkür ederim. Bu yazıyı codecademy üzerinden css grid üzerine çalışırken aldığım notlar ile hazırladım, linkini bırakıyorum. Ayrıca daha kapsamlı bilgi almak isteyenler için bu konuya kafa yoran Rachel Andrew’un hazırlamış olduğu gridbyexample websitesine de ekliyorum.
