Unit fr

Unit fleksibiliti fr menandakan bahagian atau pecahan daripada jumlah saiz ruang di mana elemen berada. Kelebihan menggunakan fr adalah sifatnya yang menyesuaikan diri dengan bekas atau resolusi skrin yang berbeza, kerana fr hanya mengagihkan semua ruang kepada bilangan pecahan (bahagian) yang ditentukan tanpa mengikat saiz tepatnya dalam piksel.

Contoh

Mari kita gunakan sifat grid-template-columns untuk menjadikan lajur pertama dan kedua grid mengambil satu bahagian bekas, dan lajur ketiga - tiga bahagian:

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

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Contoh

Nilai yang dinyatakan dalam unit fr boleh mengambil bentuk pecahan. Mari ubah contoh sebelumnya dengan menetapkan lebar untuk lajur kedua dan ketiga dalam nombor pecahan:

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

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

Lihat juga

unit px,
yang menetapkan saiz dalam piksel
unit em,
yang menetapkan saiz dalam em
unit rem,
yang menetapkan saiz dalam rem
unit %,
yang menetapkan saiz dalam peratus
unit vw,
yang menetapkan saiz dalam vw
unit vh,
yang menetapkan saiz dalam vh
unit vmax,
yang menetapkan saiz dalam vmax
unit vmin,
yang menetapkan saiz dalam vmin