Unitatea fr

Unitatea de flexibilitate fr reprezintă o parte sau fracțiune din dimensiunea totală a spațiului în care se află elementul. Avantajul utilizării fr este adaptabilitatea sa la diferite containere sau rezoluții de ecran, deoarece fr distribuie simplu întregul spațiu în numărul indicat de fracțiuni (părți) fără a fi legat de dimensiunea lor exactă în pixeli.

Exemplu

Să folosim proprietatea grid-template-columns pentru a face ca prima și a doua coloană a grid-ului să ocupe o parte a containerului, iar a treia coloană - trei părți:

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

Результат:

Exemplu

Valorile specificate în unități fr pot lua forme fracționale. Să modificăm exemplul anterior, specificând pentru a doua și a treia coloană lățimea în numere fracționale:

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

Результат:

Vezi și