De fr-eenheid in CSS Grids

De afmetingen van rijen en kolommen in een grid kunnen niet alleen worden ingesteld in px, maar ook in flexibele eenheden fr (fractie). Het gebruik van deze eenheden betekent dat alle beschikbare ruimte voor het plaatsen van elementen wordt verdeeld in gelijke delen of fracties. Elk element kan een bepaald deel van deze verdeling innemen. Laten we eens kijken hoe dit wordt gedaan.

Laten we met behulp van de eigenschap grid-template-columns instellen dat de eerste en tweede kolom van het grid één deel van de container innemen, en de derde kolom - drie delen:

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

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: