Адзінка fr
Адзінка гібкасці fr
абазначае долю або фракцыю ад агульнага
памеру прасторы, у якой знаходзіцца элемент.
Перавагай выкарыстання
fr з'яўляецца яго адаптыўнасць да
розных кантэйнераў або дазволам экрана,
паколькі fr проста размеркоўвае ўсю прастору на паказаную
колькасць фракцый (часткаў) без прывязкі да іх дакладнага
памеру ў пікселях.
Прыклад
Давайце з дапамогай уласцівасці
grid-template-columns
зробім так, каб першы і другі
слупкі гріда занялі адну частку кантэйнера,
а трэці слупок - тры часткі:
<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;
}
:
Прыклад
Значэнні, паказаныя ў адзінках fr
могуць прымаць дробны выгляд. Давайце
змянім папярэдні прыклад, паказаўшы
для другога і трэцяга слупка шырыню
ў дробных ліках:
<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;
}
:
