Jumlah dan Lebar Baris di CSS Grid

Elemen grid juga dapat ditempatkan berdasarkan baris. Untuk ini digunakan properti grid-template-rows. Properti ini menerima ukuran-ukuran baris yang dipisahkan oleh spasi. Di dalamnya dapat diterapkan nilai-nilai yang sama yang telah kita pelajari untuk kolom.

Contoh

Sebagai contoh, mari tempatkan blok-blok menjadi empat baris:

<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: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari tentukan untuk baris pertama dan ketiga lebar tetap dalam piksel, dan biarkan baris kedua mengambil ruang yang tersisa:

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Gunakan fungsi repeat untuk menentukan ukuran baris:

<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: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Tetapkan tinggi baris sebesar 50px, dan jumlah baris ditentukan secara otomatis menggunakan nilai auto-fill:

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

Tugas Praktis

Tempatkan blok-blok menjadi tiga baris. Biarkan blok pertama berukuran 100px, blok kedua 150px, dan blok ketiga 200px.

Misalkan grid Anda memiliki tiga baris. Buatlah agar ketiganya memiliki lebar yang sama.