Bilangan dan Lebar Baris dalam Grid CSS

Unsur grid juga boleh ditempatkan mengikut baris. Untuk tujuan ini, sifat grid-template-rows digunakan. Sifat ini menerima saiz baris yang dipisahkan oleh ruang. Anda boleh menggunakan nilai yang sama yang telah kita pelajari untuk lajur.

Contoh

Sebagai contoh, mari letakkan blok dalam 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 lebar tetap dalam piksel untuk baris pertama dan ketiga, dan biarkan baris kedua mengambil ruang yang tinggal:

<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 saiz 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 ketinggian baris kepada 50px, dan bilangan baris ditetapkan secara automatik 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 Praktikal

Letakkan blok dalam tiga baris. Biarkan blok pertama mempunyai saiz 100px, yang kedua 150px, dan yang ketiga 200px.

Andaikan grid anda mempunyai tiga baris. Pastikan mereka mempunyai lebar yang sama.