Na lição anterior, você foi apresentado ao CSS grid que pode ser usado para criar layouts complexos e fluidos nas suas páginas web. Nesta lição, exploraremos como criar layouts de grade flexíveis usando a unidade fr. Vamos começar com esta marcação HTML que vai representar nosso container de grid:

<div class="grid-container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Dentro do CSS, definimos a propriedade display como grid para o container.

<link rel="stylesheet" href="styles.css" />
<div class="grid-container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

html,
body {
  width: 90%;
  height: 50%;
}

.grid-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  gap: 15px;
  background-color: darkgray;
  height: 100%;
}

.col {
  background-color: darkslateblue;
}

grid-template-columns é usado para definir o tamanho de cada coluna. Neste caso, cada tamanho de coluna será 25% do contêiner. Então a propriedade gap é usada para criar espaço ao redor de cada coluna. Até agora temos usado porcentagens para o tamanho da coluna mas também podemos usar a unidade fr. A unidade fr é uma unidade fracionária que representa uma fração do espaço para o contêiner da grade. Aqui está como o código ficará quando for refatorado para usar unidades fr em vez de porcentagens.

<link rel="stylesheet" href="styles.css" />
<div class="grid-container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

html,
body {
  width: 90%;
  height: 50%;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  background-color: darkgray;
  height: 100%;
}

.col {
  background-color: darkslateblue;
}

Cada coluna ocupará uma fração do espaço disponível. Como há quatro colunas, cada coluna terá uma parte igual do espaço disponível no contêiner da grade. À medida que você começa a construir seus layouts de grade, você vai querer usar unidades fr com mais frequência porque elas fornecem uma maneira flexível e proporcional de distribuir espaço, permitindo que você crie layouts responsivos que se adaptam a diferentes tamanhos de tela sem precisar ajustar manualmente os valores em pixels.