Sifat grid-template-rows

Sifat grid-template-rows menetapkan bilangan dan lebar baris yang akan diduduki oleh elemen dalam grid atau rangkaian. Dalam nilai sifat, kita tentukan lebar baris dalam sebarang unit untuk saiz. Sifat dinyatakan dalam elemen induk dan menentukan lebar baris elemen anak.

Apabila menetapkan nilai dalam piksel dalam sifat, saiz baris akan sepadan tepat dengannya. Jika kita menetapkan perkataan auto, maka baris akan mengisi semua ruang yang tersedia. Penggunaan unit fr (pecahan) bermaksud, bahawa semua ruang akan dibahagikan kepada bahagian yang sama. Kelebihan fr adalah kesesuaiannya dengan wadah atau resolusi skrin yang berbeza, kerana fr hanya membahagikannya kepada bilangan pecahan yang ditetapkan tanpa dikaitkan dengan saiz tepat dalam piksel.

Sintaks

selector {
	grid-template-rows: lebar baris;
}

Contoh

Mari kita tetapkan lebar baris untuk 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 kita tetapkan untuk baris pertama dan ketiga lebar tetap dalam piksel, dan biarkan baris kedua secara automatik 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 sifat grid-template-rows mari kita buat agar baris pertama dan kedua menduduki satu bahagian wadah, dan baris ketiga - tiga bahagian:

<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 dinyatakan dalam unit fr boleh mengambil bentuk pecahan. Mari ubah contoh sebelumnya, dengan menetapkan untuk baris kedua dan ketiga lebar dalam nombor 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 sifat grid-template-rows kita nyatakan fungsi repeat(), yang akan memberitahu wadah bahawa semua tiga baris harus mempunyai 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 kita ubah contoh sebelumnya agar kepada tiga baris yang sama ditambah baris keempat, yang akan menduduki dua pecahan 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 kita tetapkan untuk dua baris pertama lebar satu pecahan wadah, dan untuk dua baris terakhir - dua pecahan:

<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 kita tetapkan lebar baris dengan menggabungkan nilai yang dinyatakan menggunakan fungsi repeat() dan unit 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() boleh dinyatakan nilai auto-fill, yang akan mengisi wadah kita dengan baris yang sama dengan lebar yang kita perlukan:

<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 bersama dengan auto-fill menyatakan fungsi minmax, yang menetapkan julat lebar baris dari nilai minimum hingga maksimum. Jika lebar wadah tidak dapat memuatkan semua baris, maka sebahagian daripadanya akan dipindahkan ke baris baru, dengan baris dalam baris diagihkan secara sama rata di dalamnya. Mari ubah contoh sebelumnya, dengan menyatakan 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 kita nyatakan sifat auto-fit, perbezaannya dari auto-fill adalah, ia menyesuaikan bilangan baris mengikut lebar wadah yang tersedia, mengembangkan atau mengecutkannya:

<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 boleh digunakan nilai dalam %, yang juga menentukan bahagian mana dari wadah yang akan diduduki oleh baris. Dalam kes ini, saiz baris dalam % akan dikira terlebih dahulu, dan ruang kosong yang tinggal akan dibahagikan kepada pecahan:

<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 kita gunakan bersama sifat 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 sifat grid-template-columns dan grid-template-rows buat jadual daripada sembilan sel, disusun dalam tiga baris. Dan baris kedua dan ketiga akan mempunyai lebar yang sama, dan setiap lajur - lebar yang berbeza:

<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 jadual dari contoh sebelumnya buat baris atas selebar dua pecahan, dan lajur pertama - setengah pecahan:

<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

sifat grid-template-columns,
yang menetapkan bilangan dan lebar lajur dalam grid
sifat grid-auto-rows,
yang menetapkan bilangan dan lebar baris dalam grid tersirat