Unidade fr em CSS Grids

Os tamanhos das linhas e colunas no grid podem ser definidos não apenas em px, mas também em unidades de flexibilidade fr (fração). O uso dessas unidades significa que todo o espaço para a colocação dos elementos será dividido em partes iguais ou frações. Cada elemento poderá ocupar uma determinada parte dessa divisão. Vamos ver como isso é feito.

Vamos usar a propriedade grid-template-columns para fazer com que a primeira e a segunda colunas do grid ocupem uma parte do contêiner, e a terceira coluna - três partes:

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

Результат: