Properti grid-template-rows

Properti grid-template-rows menentukan jumlah dan lebar baris yang akan ditempati oleh elemen dalam grid atau kisi. Dalam nilai properti, kita tentukan lebar baris dalam satuan untuk ukuran apa pun. Properti ditentukan dalam elemen induk dan menentukan lebar baris elemen-elemen anak.

Saat menentukan nilai dalam piksel di properti, ukuran baris akan persis sesuai dengannya. Jika kita memberikan kata auto, maka baris akan mengisi semua ruang yang tersedia. Penggunaan satuan fr (fraksi) berarti bahwa semua ruang akan dibagi menjadi bagian yang sama. Keuntungan dari fr adalah adaptabilitasnya terhadap 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-rows: lebar baris;
}

Contoh

Mari tentukan lebar baris untuk elemen-elemen kita dalam grid:

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

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari berikan lebar tetap dalam piksel untuk baris pertama dan ketiga, dan biarkan baris kedua secara otomatis mengisi ruang yang tersedia:

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

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang dengan menggunakan properti grid-template-rows buatlah agar baris pertama dan kedua menempati satu bagian wadah, dan baris ketiga - tiga bagian:

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

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

Contoh

Nilai yang ditentukan dalam satuan fr dapat berbentuk pecahan. Mari ubah contoh sebelumnya, tentukan lebar untuk baris kedua dan ketiga dalam bilangan pecahan:

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

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

Contoh

Mari dalam properti grid-template-rows tentukan fungsi repeat(), yang akan memberi tahu wadah bahwa semua tiga baris harus memiliki lebar yang sama:

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

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari ubah contoh sebelumnya agar ke tiga baris yang sama ditambahkan baris keempat, yang akan menempati dua fraksi wadah:

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

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari berikan lebar satu fraksi wadah untuk dua baris pertama, dan dua fraksi untuk dua baris terakhir:

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

#parent {
	display: grid;
	grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari atur lebar baris dengan menggabungkan nilai yang ditentukan menggunakan fungsi repeat() dan satuan bebas fr:

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

#parent {
	display: grid;
	grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Juga dalam fungsi repeat() dapat ditentukan nilai auto-fill, yang akan mengisi wadah kita dengan baris-baris identik dengan lebar yang kita butuhkan:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sangat mudah untuk menggunakan auto-fill bersamaan dengan fungsi minmax, yang menentukan rentang lebar baris dari nilai minimum hingga maksimum. Jika lebar wadah tidak dapat memuat semua baris, maka beberapa baris akan dipindahkan ke baris baru, sementara baris-baris dalam satu baris akan didistribusikan secara merata di dalamnya. Mari ubah contoh sebelumnya, tentukan di dalamnya fungsi minmax:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari tentukan properti auto-fit, perbedaannya dari auto-fill terletak pada kenyataan bahwa ia menyesuaikan jumlah baris dengan lebar wadah yang tersedia, memperluas atau menyusutkannya:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Juga bersama dengan fr dapat digunakan nilai dalam %, yang juga menentukan bagian mana dari wadah yang akan ditempati oleh baris. Dengan demikian, pertama-tama ukuran baris dalam % akan dihitung, dan ruang kosong yang tersisa akan dibagi menjadi fraksi:

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

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

Contoh

Mari gunakan bersama properti grid-template-columns dan grid-template-rows:

<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-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari dengan menggunakan properti grid-template-columns dan grid-template-rows buat tabel dari sembilan sel, yang terletak dalam tiga baris. Selain itu, baris kedua dan ketiga akan memiliki lebar yang sama, dan setiap kolom - lebar yang berbeda:

<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-rows: 60px 1fr 60px;
	grid-template-columns: 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang dalam tabel dari contoh sebelumnya buatlah 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-rows: 2fr 1fr 1fr;
	grid-template-columns: 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-template-columns,
yang menentukan jumlah dan lebar kolom dalam grid
properti grid-auto-rows,
yang menentukan jumlah dan lebar baris dalam grid implisit