CSS GRID
· Grid nedir?
Grid sayesinde web sayfalarının yapısını daha düzenli ve görsel olarak daha güzel hale getirmek için kullanılan temelde Row ve Column olarak adlandırılan yatay ve dikey kılavuz çizgilerden oluşuyor. Bu özellik sayesinde, web sayfaları farklı ekran boyutlarına ve cihazlara uygun olarak tasarlanabilir. Grid öğeleri doğrudan yerleştirmek yerine, ızgara sistemi üzerinde yerleştirilir ve boyutlandırılır.
· Grid kullanmak için öncelikle bir grid container oluşturulması gerekmektedir.
.container {
display: grid;
}
GRID CONTAINER
- Row, column, cell gibi yapıların oluşumunu sağlayan ana kutu.
· Grid container oluşturulduktan sonra, içerisine grid itemler eklenir. Grid itemler, web sayfasındaki farklı bölümleri ifade eder.
.item {
background-color: #ccc;
padding: 10px;
text-align: center;
}
Elemanları ızgara üzerindeki belirli hücrelere yerleştirmek için grid-column ve grid-row gibi özellikler kullanılabilir.
GRID ROW
- Yatay kısımlardan oluşan yapılardır.
GRID COLUMN
- Dikey kısımlardan oluşan yapılardır.
GRID CELL
- 4 tane grid line arasında bulunur.Gridin en küçük birimidir.
Bir web sitesi oluşturturulurken her bir kısım bölüm bölüm ayrılır ve bir şablon çıkarılır.Bu işlemin CSS grid ile de yapılabilir.
-Grid-area özelliği, grid-row-start, grid-column-start, grid-row-end ve grid-column-end özellikleri için kısa yol özelliği olarak kullanılabilir.
- Grid-template-columns özelliği, ızgara düzenindeki sütunların sayısını (ve genişliklerini) belirtir.
- Grid-template-rows özelliği, ızgara düzenindeki satırların sayısını (ve yüksekliğini) belirtir.
-Grid-template-areas özelliği, ızgara düzeni içindeki alanları belirtir. Grid-area özelliğini kullanarak ızgara öğelerini adlandırabilir .
