fr Birimi

Esneklik birimi fr bir öğenin bulunduğu alanın toplam boyutundan bir payı veya fraksiyonu temsil eder. fr kullanmanın avantajı, farklı konteynerlere veya ekran çözünürlüklerine uyum sağlamasıdır, çünkü fr, piksel cinsinden kesin boyutlarına bağlı kalmadan tüm alanı belirtilen fraksiyon (parça) sayısına böler.

Örnek

grid-template-columns özelliğini kullanarak grid'in birinci ve ikinci sütunlarının konteynerin bir kısmını, üçüncü sütunun ise üç kısmını kaplamasını sağlayalım:

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

css#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;
}

Результат:

Örnek

fr birimlerinde belirtilen değerler kesirli olabilir. Bir önceki örneği değiştirerek ikinci ve üçüncü sütunların genişliğini kesirli sayılarla belirtelim:

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

css#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;
}

Результат:

Ayrıca Bakınız