Unit fr

Unit fleksibilitas fr menunjukkan bagian atau fraksi dari total ukuran ruang tempat elemen berada. Keuntungan menggunakan fr adalah kemampuannya beradaptasi dengan berbagai wadah atau resolusi layar, karena fr hanya mendistribusikan seluruh ruang ke dalam jumlah fraksi (bagian) yang ditentukan tanpa terikat dengan ukuran pastinya dalam piksel.

Contoh

Mari kita gunakan properti grid-template-columns untuk membuat kolom grid pertama dan kedua menempati satu bagian wadah, dan kolom ketiga - tiga bagian:

<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 ditentukan dalam unit fr dapat berbentuk pecahan. Mari ubah contoh sebelumnya, tentukan lebar untuk kolom kedua dan ketiga dalam bilangan 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 mengatur ukuran dalam piksel
unit em,
yang mengatur ukuran dalam em
unit rem,
yang mengatur ukuran dalam rem
unit %,
yang mengatur ukuran dalam persentase
unit vw,
yang mengatur ukuran dalam vw
unit vh,
yang mengatur ukuran dalam vh
unit vmax,
yang mengatur ukuran dalam vmax
unit vmin,
yang mengatur ukuran dalam vmin