Properti grid-template

Properti grid-template menentukan jumlah dan lebar baris serta kolom yang akan ditempati oleh elemen dalam grid dan merupakan bentuk singkat dari properti grid-template-rows dan grid-template-columns. Baris dan kolom, di mana elemen akan ditempatkan ditunjukkan melalui garis miring. Properti grid-template ditetapkan dalam elemen induk dan menentukan penempatan elemen anak. Dalam nilai properti, kita tentukan lebar baris atau kolom dalam satuan untuk ukuran apapun.

Saat menetapkan nilai dalam piksel pada properti, ukuran elemen akan persis sesuai dengannya. Jika kita memberikan kata auto, maka kolom dan baris akan mengisi semua ruang yang tersedia. Penggunaan satuan fr (fraksi) berarti bahwa semua ruang akan dibagi menjadi bagian yang sama. Keuntungan fr adalah kemampuannya beradaptasi dengan berbagai wadah atau resolusi layar, karena fr hanya membaginya menjadi jumlah fraksi yang ditentukan tanpa terikat dengan ukuran pasti dalam piksel.

Sintaksis

selektor {
	grid-template: lebar dan jumlah baris / lebar dan jumlah kolom;
}

Contoh

Mari kita buat sebuah tabel menggunakan properti grid-template:

<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;
}

Contoh

Dan sekarang mari kita tetapkan lebar yang sama untuk baris kedua dan ketiga, dan lebar yang berbeda untuk setiap kolom:

<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;
}

Contoh

Dan sekarang dalam tabel dari contoh sebelumnya mari kita buat baris atas dengan lebar dua fraksi, dan kolom pertama - setengah fraksi:

<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;
}

Lihat juga

properti grid,
yang menetapkan notasi singkat untuk properti kolom dan baris
properti grid-template-rows,
yang menentukan jumlah dan lebar baris dalam grid
properti grid-template-columns,
yang menentukan jumlah dan lebar kolom dalam grid