CSS Grid'de Sütun Sayısı ve Genişliği

Grid ile çalışmaya alt elemanların yerleştirileceği sütunların sayısını ve genişliğini belirleyerek başlayacağız. Bu amaçla, ebeveyn elemana belirtilen ve grid'deki alt elemanların kaplayacağı sütunların sayısını ve genişliğini tanımlayan grid-template-columns özelliğini kullanacağız. Özelliğin değeri olarak sütun genişliklerini piksel cinsinden belirtiyoruz.

Örnek

İlk olarak bir ebeveyn eleman oluşturalım ve onu bir grid konteyneri yapalım. Diyelim ki içinde dört tane alt eleman bulunan bir div'imiz var. Bunun için display özelliğine grid değerini, grid-template-columns özelliğine ise iki sütunun genişliğini yazalım:

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

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi dört farklı boyutta sütundan oluşan bir tablo oluşturalım:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Pratik Görevler

Diyelim ki dokuz alt elemana sahip bir div'iniz var. Ebeveyn elemanı bir grid konteyneri yapın.

Alt elemanları genişliği 200px olan iki sütuna yerleştirin.

Alt elemanları genişliği 150px olan üç sütuna yerleştirin.

Alt elemanları üç sütuna yerleştirin: birincisi 100px genişliğinde, ikincisi 150px genişliğinde, üçüncüsü ise 200px genişliğinde olsun.