grid.png- Css Grid (İzgara) Düzeni Temel Ozellikleri-cahitsoyman.blogspot.com
Bir grid (ızgara) tanımladığımızda, grid öğeleri konumlandırırken kullanılacak numaralı satırları da oluşturur.

Aşağıda  3 sütun izi ve  2 satır izini gösteren bir örnek verilmiştir. Bu örnek de grid containerimizin içinde 5 alt öğemiz var. Bunları ızgaraya herhangi bir şekilde yerleştirmezsek otomatik yerleştirme kuralına göre, ilk beş hücrenin her birinde bir öğe olacak şekilde yerleştirilirler.

Bu ızgaraların nerede bulunduğunu kontrol etmek için sütun ve satır çizgilerini kullanabiliriz.

Başlangıç ve bitiş çizgileri belirterek öğeleri bu çizgilere göre yerleştirebiliriz.


Sütunlar için; 
grid-column-start ve grid-column-end şeklinde veya grid-column dan sonra başlangıç sütun çizgi numarası / (slaş) bitiş sütün çizgi numarası şeklinde yerleştirebiliriz. 

Satırlar için de; 
grid-row-start ve grid-row-end şeklinde veya grid-row dan sonra başlangıç satır çizgi numarası  / (slaş) bitiş satır çizgi numarası şeklinde yerleştirebiliriz.

Aşağıda ki örnek de görüldüğü gibi yatay olarak üç sütunlu ve dikey olarak 2 satırlı ızgaramız da; soldan sağa (yatay) doğru 4 sütun (column) satırı,  yukarıdan aşağıya (dikey) doğru da 3 satır (row) çizgimiz olur.

Grid sütün ve satır çizgileri


Basit bir örnekle, 3 sütunlu ve 3 satırlı bir grid örneğini öğeleri satırlara göre konumlandırarak yapalım.


 .box1 {
            grid-column-start: 1;
             grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 3;
            }

.box2 {
            grid-column-start: 1;
             grid-row-start: 3;
             grid-row-end: 5;
            }  


Ancak, bir öğe bir satıra yayılayarak yerleşecekse; grid-column-end, grid-row-end değerlerini yazmadan atlayabiliriz. 

Yukarıda ki kodu satır bazında aşağıda ki şekilde de yazabiliriz.



 .box1 {
            grid-column: 1 / 4 ;
             grid-row: 1 / 3 ;
            }

.box2 {
            grid-column: 1 / 3 ;
             grid-row: 3 / 5 ;
            }  


Css kodlarımızla;  
Aşağıda ki gibi birinci kutumuz için ; birinci sütun çizgisinden başlayarak 4. sütün çizgisine kadar yatay olarak genişlesin, dikey olarak da birinci satır çizgisinden başlasın 3. satır çizgisine kadar genişlesin diyoruz.

İkinci kutumuz için; yatay olarak birinci sütun çizgisinde kalsın, dikey olarak da 3. satır çizgisinden başlasın ve 4. satır çizgisine kadar genişlesin diyoruz.

Codepen görüntümüz:





Gride öğe yerleştirmenin diğer bir yolu da grid-template-areas (ızgara-şablon-alan) özelliğini kullanmaktır. Bu şekilde konumlandırmada satır çizgisi kullanmaya gerek kalmamaktadır. Bunun için tasarımızın öğelerine çeşitli adlar tanımlamamız gerekmektedir.

Areas (alan) özelliğini kullanırken;

  • Gridin her hücresini doldurmanız gerekir.
  • İki hücreye birden yayarak göstermek için adı tekrarlamalıyız.
  • Alanlar dikdörtgen şeklinde ( L veya başka şekilde olmamalı ) olmalıdır.
  • Bir hücreyi boş bırakmak için ad yerine noktayı kullanmalıyız.
  • Alanları farklı konumlarda tekrarlamalıyız. 
Grid-temlate-areas özelliği ile konumladırmayı Codepen de görüntüleyelim.





Aynı örneği satır numarasına göre aşağıda ki Css kodları ile de yerleştirerek aynı görüntüyü elde edebiliriz.




  .header {
            grid-column: 1 / 13;
             grid-row: 1;
            }
 .article {
             grid-column: 2/ 13;
              grid-row: 2;
            }
 .aside {
            grid-column: 1/1;
            grid-row: 2;
             height:150px;
            }
 .footer {
            grid-column: 1 / 13;
            grid-row: 3;
            }


Bunlardan başka; hem satır, hem de sütun konumunda bir başlangıç çizgisi belirledikten sonra, bitiş çizgisi yerine span özelliğini de kullanarak alanın yayılmasını istediğimiz parça sayısını da belirleyerek öğeleri konumlandırabiliriz.

Aşağıda ki örneğinde; box1 ve box2 de row span özelliği, box4 ve box5 de de column span özelliği kullanılarak konumlandırma yapılmıştır.





Yerleştirme yapmadığınız diğer öğelerin de otomatik yerleşim kuralına göre yerleştiği  görülmektedir.  

Bu şekilde konumlandırma da öğelerin birbirlerinin üzerine gelmesi halinde z-index özelliğini kullanarak yığılma sırasını kontrol edebiliriz.