CSS Grid'e Giriş

CSS grid'leri, öğeleri hem yatay hem de dikey olarak aynı anda yerleştirmenin bir yolunu sunar. Flexbox ile karşılaştırıldığında daha gelişmiş bir yöntemdir, ancak öğrenmesi daha karmaşıktır.

Bir grid oluşturmak için, bir öğeye display özelliğini grid değerinde ayarlamanız gerekir:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

Bundan sonra, öğe iki boyutlu bir ızgaraya dönüşür, burada öğeler dikey (sütunlar) ve yatay (satırlar) olarak yerleştirilir. Bir sütun ve bir satırın kesiştiği alana hücre denir.

Özel özellikler kullanarak öğeleri hem satırlara hem de sütunlara göre konumlandırabilirsiniz. Bu, örneğin aşağıdaki gibi şeyleri kolayca yapmanızı sağlayacaktır:

Sonraki derslerde, önce öğelerin sütunlara göre yerleşimini inceleyeceğiz, ardından satırları öğrenmeye geçeceğiz ve daha sonra tüm bunları bir araya getireceğiz.