CSS Grid Layout Module Nedir?

Daha önceki yazılarda CSS Multi-column Layout ve Flexbox Layout Module özelliklerinden bahsetmiş ve layout oluşturma sürecinde neler yapılabileceğini görmüştük. Bu yazının konusu olan CSS Grid Layout Module ise layout sürecini bir başka noktaya taşıyacak bir sistem sunmakta. Peki, nasıl?

CSS Grid Layout Module

Inline-box, float da dahil layout oluşturma sürecinde kullanabileceğimiz çözümlerin yanı sıra, flexbox gibi grid (ızgara) sistemleri 1 boyutlu / eksenli sistemlerdir. CSS Grid Layout Module (kısaca Grid) ise 2 boyutlu / eksenli bir layout sistemdir (two-dimensional grid-based layout). Bu da Grid Container içerisindeki item’ları (Grid Items) hem yatayda (row / satır) hem de dikeyde (column sütun) yönetme imkanı sağlar. Aklınıza table kullanımı gelmiş olabilir. Evet, grid bu anlamda tablo kullanımına benzerlik taşımakta. Ancak, sahip olduğu özellikler ve duyarlı davranışlar tablo gibi sıralı bir yapı ile kıyaslandığında çok daha önemli katkılar sunmaktadır ¹ ².

Grid Container

Flexbox modülünde de olduğu gibi, grid sisteminden faydalanabilmemiz için sistemi uygulayacağımız item’ları kapsayan ana katmanın (parent container) display özelliği ile ilk adımı atmalıyız.

.grid-container {
display: grid | inline-grid | subgrid;
}

display: grid tanımlanan elementi blok bir grid kapsayıcı (container) haline getirir.
display: inline-grid CSS display özellikleri yazısında yer alan inline tanımı ile ilişkili olarak, tanımlanan elementi satır içi (inline) bir grid container haline getirir.
display: subgrid ise tanımlanan elementi hem bir grid container hem de grid item haline getirir.

Bu tanımla birlikte grid-template-columns ve grid-template-rows ve alt elementler için (child elements / items) grid-column ve grid-row tanımlamalarını yaparak layout sürecine başlayabiliriz.

Terminoloji

Grid özelliklerine geçmeden bazı terimlere değinmekte fayda var.

Grid Line (Izgara Çizgisi)

Grid yapısını oluşturan ve item’ları ayıran bölme çizgileri olarak ifade edilebilir. Bu çizgiler dikey (column grid lines) veya yatay (row grid lines) olabilir, satır (row) ve sütunların (column) her iki tarafında da bulunabilir. Sıralama 1 ile başlar.

Yukarıdaki görselde kırmızı olarak renklendirilmiş dikey çizgi örnek bir grid çizgisini (column grid lines) temsil etmektedir.

Grid Track (Izgara İzi)

İki bitişik grid line arasında kalan dikey ve yatay boşluk grid track olarak adlandırılmakta. Bu boşluk dikeyde (column grid lines) veya yatayda (row grid lines) olabilir.

Yukarıdaki görselde 2. ve 3. satır çizgileri (row grid lines) arasında kalan grid track kırmızı renk ile işaretlenmiştir.

Grid Cell (Izgara Elemanı / Item)

Grid container içerisindeki en küçük yapıdır ve dikeyde ve yatayda grid çizgileri (line) ile sınırları belirlenmiş tek bir birimdir (unit).

Yukarıdaki görselde 2. ve 3. sütun çizgileri (column grid lines) ve 1. ve 2. satır çizgileri (row grid lines) ile belirlenmiş bir grid cell kırmızı renk ile gösterilmektedir.

Grid Area (Izgara Alanı)

Grid area dört ızgara çizgisi (grid line) kesişimi arasında kalan alandır. Bu alan bir veya daha fazla grid cell’den oluşabilir.

Yukarıdaki görselde 1. ve 3. dikey (column) grid ve yatay (row) çizgileri (grid lines) arasında kalan grid area kırmızı renk ile gösterilmiştir.

Son Olarak

CSS Grid Layout Module ile ilgili yazıyı burada sonlandıralım. Bir sonraki yazılarda ayrı ayrı Grid Container ve Grid Item özelliklerine bakacağız.