CSS Grid Nedir?

CSS Grid, CSS'de yepyeni bir düzen sistemidir! Bu bir çerçeve veya kitaplık değildir - hızlı bir şekilde esnek, iki boyutlu düzenler oluşturmamıza izin veren dile bir ektir.

CSS Grid Nedir?

CSS Grid, bir web sayfasındaki veya uygulamadaki öğelerin iki boyutlu düzeni için tasarlanmış bir CSS düzeni yöntemidir.

CSS Grid, geliştiriciler için HTML'den çok daha fazla özgürlük sunan bir çerçevedir.

CSS Grid geliştiricilerin her zamankinden daha fazla esneklik ve kontrol ile özel ızgaralar oluşturmasına olanak tanır.

Blok sisteminin aksine, herhangi bir yerleşim kısıtlaması yoktur ve kişinin istediği kadar UI öğeleriyle oynamasına izin verir.

Aşağıdaki resim ızgara modelinin düzenini göstermektedir.

CSS Grid

CSS Grid Terimleri

Grid Item (Izgara Öğesi)

Izgara kapsayıcı, ızgara öğelerini içerir.

Grid Line (Izgara hattı)

Izgara çizgisi, ızgaranın yapısını oluşturan dikey veya yatay bir ızgara çizgisidir.

Grid Cell (Izgara hücresi)

Bir ızgaradaki en küçük birim, Izgara hücresi olarak adlandırılır. Bitişik iki satır ve sütun arasındaki boşluktur.

Rows (Satırlar)

Izgara sırası, ızgaranın yatay izidir.

Columns (Kolonlar)

Izgara sütunu, ızgaranın dikey izidir.

Gutter (Oluk)

Oluk, ızgaradaki satırlar ve sütunlar arasındaki boşluktur.

Grid Container (Izgara Konteyner)

Grid kapsayıcı, üzerine display: grid özelliğinin uygulandığı bir öğedir. Tüm ızgara öğelerinin doğrudan ebeveynidir. Izgara kabının öğeleri satır ve sütunların içine yerleştirilir.

Grid kapsayıcıyı bir örnek yardımıyla daha iyi anlayalım.

grid-template-columns : Sütunların boyutunu ayarlamak için kullanılır.
grid-template-rows : Satırların boyutunu ayarlamak için kullanılır.
grid-gap : Grid-gap özelliği, satırlar ve sütunlar arasındaki boşluğu ayarlar.

fr birimi, esnek ızgara izleri oluşturmak için kullanılır. Izgara kapsayıcısındaki kullanılabilir alanın bir kısmını temsil eder.

Daha detaylı bilgi için aşağıdaki videoyu izleyebilirsiniz.

Caner BULUT

Caner Bulut, Argenova'nın Kurucusu ve CEO'sudur. Yazılım geliştirme ve ürün geliştirme alanlarında deneyimlidir. Birçok başarılı projeye imza atmıştır ve teknoloji ekosistemine bilgi paylaşımıyla katkı sağlamaktan keyif almaktadır. Yoğun programına rağmen yeni bilgileri paylaşmak ve öğrenmek, ona büyük bir motivasyon kaynağı olmaktadır.