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