grid-template Özelliği

grid-template özelliği, bir elemanın grid veya ızgara içinde kaplayacağı satır ve sütunların sayısını ve genişliğini belirler ve grid-template-rows ile grid-template-columns özelliklerinin kısaltılmış halidir. Elemanın yerleştirileceği satır ve sütunlar slash işareti ile ayrılarak belirtilir. grid-template özelliği ebeveyn elemana tanımlanır ve alt elemanların yerleşimini belirler. Özelliğin değeri olarak satır veya sütun genişliklerini herhangi bir boyut birimiyle belirtebiliriz.

Özelliklere piksel cinsinden değerler verdiğimizde elemanların boyutları tam olarak bu değerlere uygun olacaktır. Eğer auto kelimesini kullanırsak, sütunlar ve satırlar tüm mevcut alanı dolduracaktır. fr (fraksiyon) biriminin kullanımı, tüm alanın eşit parçalara bölüneceği anlamına gelir. fr biriminin avantajı, farklı konteynerlere veya ekran çözünürlüklerine uyum sağlayabilmesidir, çünkü fr, piksel cinsinden kesin bir boyuta bağlı kalmadan alanı belirtilen sayıda fraksiyona böler.

Sözdizimi

seçici {
	grid-template: satırların genişliği ve sayısı / sütunların genişliği ve sayısı;
}

Örnek

grid-template özelliğini kullanarak 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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi de ikinci ve üçüncü satırlara aynı genişliği verelim, her bir sütuna ise farklı genişlikler atayalı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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi bir önceki örnekteki tabloda üst satırın genişliğini iki fraksiyon, ilk sütunun genişliğini ise yarım fraksiyon yapalı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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ayrıca Bakınız

sütun ve satır özelliklerinin kısaltılmış yazımını sağlayan grid özelliği
grid içindeki satırların sayısını ve genişliğini belirleyen grid-template-rows özelliği
grid içindeki sütunların sayısını ve genişliğini belirleyen grid-template-columns özelliği