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;
}
:
Сондай-ақ қараңыз
-
pxбірлігі,
ол пикселдегі өлшемді белгілейді -
emбірлігі,
ол em-дегі өлшемді белгілейді -
remбірлігі,
ол rem-дегі өлшемді белгілейді -
%бірлігі,
ол пайызбен өлшемді белгілейді -
vwбірлігі,
ол vw-дегі өлшемді белгілейді -
vhбірлігі,
ол vh-дегі өлшемді белгілейді -
vmaxбірлігі,
ол vmax-тегі өлшемді белгілейді -
vminбірлігі,
ол vmin-дегі өлшемді белгілейді