Bu makalede bir grid (ızgara) düzeninin nasıl oluşturulduğunu, Css Grid Düzeni tarafından kullanılan bazı temel özellikleri anlatmaya çalışacağım.
Grid; Row (satır) ve Column (sütun) lardan oluşan bir yapıdır. Css Grid Düzeni ile özellikle, grid tabanlı satır responsive çalışan mizanpajların ve hizalamaların nasıl oluşturulduğunu keşfedeceğiz. Flexbox tan farklı olarak elemanların çift boyutlu (yatay ve dikey de) hizalanması sağlanır.
Böylece Css Grid Düzeni sayesinde hem containere, hem de containerin alt elamanlarına css kodları uygulayarak çalıştırabiliriz. Yani; hem sutunlara, hem de satırlara şekil verebiliriz.
Bir ızgarada sütunlar (columns), satırlar (rows) ve her satır ve sütun arasında boşluklar (gap) bulunur.
Css Grid Düzeni sayesinde bir web sayfasında hem sütun ve hem de satırlarda ki öğeleri kolayca hizalayabiliriz.
Container (kapsayıcı) bir div oluşturduktan sonra satır ve kolonlarla (grid-template-rows ve grid-template-columns ) sayfamıza şekil verebiliyoruz.
Tarayıcı desteği konusunda, artık tüm tarayıcıların css grid (ızgara düzeni) düzenini desteklediğini söyleyebiliriz.
Grid sistemi ile, Css' e yeni tanımlar, değerler ve birimler gibi özellikler geldi.
Css Grid Düzenini daha iyi anlamak için bunlara kısaca göz atalım:
Grid container: Kapsadığı elemanları ızgara öğesi haline getirir. Kapsayıcıya display grid özelliği verildiğinde kapsayıcı altında ki tüm elemanlar birer grid öğesi (grid item) olur. Kısaca; row (satır), column(sütun) ve cell(hücre) gibi yapıları içine alan ana kapsayıcı.
fr (fraction) özelliği birim kesir anlamına gelmekte olup, kullanılabilir alanı esnek olarak tanımlamamızı sağlar. Yani % veya px değeri almaz. Bu birim sayesinde yatay ve dikey de sayfa planımızı esnek olarak kolayca yapabiliriz.
Grid-columns- gap: Sütunlar (yatay) arasında ki boşluğu belirleriz.
Grid column: Dikey olarak oluşan elemanlardır.
Grid-rows-gap : Satırlarda ki (dikey) boşluğu belirleriz.
Grid row: Yatay olarak oluşan elemanlardır.
Grid Line (grid çizgileri) : Grid düzenini yatay ve dikey olarak bölen çizgiler olup, grid hücrelerini bu çizgilerin numarası belirtilerek yatay ve dikeyde yerleştiririz.
Grid cell (grid öğesi): Dört br yanı grid line ve boşluklarla kaplı en küçük grid birimidir.
Ayrıca her satır ve sütunun numaraları olduğundan bootstrap, 960 grid ve foundation gibi grid yapılarına gerek kalmadan Css grid düzeni özellikleri ile sayfamıza kolayca şekil verebiliyoruz.
Grid track (grid izi): Hem yatay, hem de dikey olarak grid satır ve sütunlarını kapsayan iki çizgi arasında ki alanları belirtiriz.
Grid areas (ızgara alanı): Her grid öğesine verilen addır. Yani dört tarafı grid çizgisi le çevrili alandır. Grid alanlarını konumlandırmak için kullanırız.
minmax: Grid alanı içinde uzun içerikler veya büyük görseller yerleştirmek istediğimizde fr kesir birimi boşlukları kullandığından ızgaramız bu içeriğin büyüklüğüne göre genişleyerek esneklik kaybolur. İşte bunun önüne geçmek için içerik alanına minmax değeri verilerek bunun önüne geçeriz.
Repeat (tekrar): Kolon ve satırlarda ki tekrarlayan yapıları (kodları) kısaltmak için kullandığımız bir özelliktir.
Span: Grid öğesini genişletmek ve grid hcrelerini birleştirmek için kullandığımız bir özelliktir.
Auto-fill: Satırı sığabildiği kadar çok sütunla doldurur. Sığmayan kısmı boşluk olarak bırakır.
Auto-fit: Mevcut tüm alanları kapsayacak şeklide doldurur ve medya sorgusuna gerek bırakmadan responsive özelliği kazandırır.
Video Kaynak Kodları:İNDİR
Birinci örnekten başlayarak html ve css kodlarımızı yazalım.
Bundan sonra ki anlatımı, aşağıda ki videodan veya youtube kanalımdan takip edebilirsiniz.
0 Comments
Yorum Gönder