CSS 3 Grid 1 – Grid Nedir?

Merhabalar.

Bu yazı dizim boyunca CSS Grid modülüne bakacağız.

CSS Grid, web sayfalarında düzen oluşturmak için kullanılan bir düzen modelidir. CSS3 ile birlikte tanıtılan bir özelliktir ve sayfaları daha esnek ve karmaşık düzenlere sahip hale getirme imkanı sağlar. Grid, hem satır (row) hem de sütun (column) düzenini kontrol etme yeteneğiyle öne çıkar.

Temel özellikleri şunlardır:

Grid Container ve Grid Öğeleri:

Bir HTML öğesi üzerinde display: grid; veya display: inline-grid; özelliği tanımlanarak bir grid container oluşturulur.

Container içindeki öğeler grid öğeleri olur.

Grid Sütun ve Satırları:

grid-template-columns ve grid-template-rows özellikleri ile sütun ve satırlar belirlenir.

fr birimi ile sütun ve satırlara esneklik kazandırılır.

Grid Öğe Yerleşimi:

grid-column ve grid-row özellikleri ile grid öğelerinin hangi sütun veya satıra yerleştirileceği belirlenir.

grid-area özelliği ile öğelerin belirli bir alan içine yerleştirilmesi sağlanır.

Grid Hizalama:

justify-items ve align-items özellikleri ile grid öğelerinin içindeki içerikleri hizalamak mümkündür.

justify-content ve align-content özellikleri ile container içindeki grid öğelerini hizalamak mümkündür.

Grid Şablonları:

grid-template-areas özelliği ile özel grid şablonları oluşturulabilir.

grid-template özelliği ile sütun ve satırları bir arada belirleyebilirsiniz.

Media Query ve Responsive Tasarım:

Media query kullanarak farklı ekran boyutları için özelleştirilmiş grid düzenleri oluşturabilirsiniz.

CSS Grid, esnek ve karmaşık düzenlerin oluşturulmasını sağlayarak, sayfa tasarımında daha fazla kontrol ve özgürlük sunar.

Bir sonraki yazımda görüşmek üzere.