Kipimo fr

Kipimo cha kubadilika fr kinawakilisha sehemu au fraksheni ya jumla ya nafasi ambayo kipengele kiko ndani yake. Faida ya kutumia fr ni uwezo wake wa kukabiliana na vyombo au azimio la skrini tofauti, kwa sababu fr husambaza nafasi yote kwa idadi iliyoonyeshwa ya fraksheni (sehemu) bila kushikamana na ukubwa wao halisi katika saizi ya pikseli.

Mfano

Wacha tuzitumie sifa grid-template-columns kuifanya safu wima ya kwanza na ya pili ya gridi kuchukua sehemu moja ya chombo, na safu wima ya tatu - sehemu tatu:

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

Результат:

Mfano

Thamani zilizoonyeshwa kwa vipimo fr zinaweza kuchukua mfumo wa sehemu. Wacha tubadilishe mfano uliopita, tukiwaonyesha safu wima ya pili na ya tinta upana katika nambari za sehemu:

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

Результат:

Angalia Pia