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.