RAM (repetição, automática, mínima máxima)

Para este sétimo exemplo, combine alguns dos conceitos que você já aprendeu para criar um layout responsivo com filhos flexíveis e posicionados automaticamente. Muito legal. Os termos-chave a serem lembrados aqui são repeat, auto-(fit|fill) e minmax(). Como você se lembra da sigla RAM,

O resultado é este:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Você está usando repeat() novamente, mas, desta vez, usando a palavra-chave auto-fit em vez de um valor numérico explícito. Isso permite o posicionamento automático desses elementos filhos. Esses filhos têm um valor mínimo básico de 150px, com um valor máximo de 1fr. Isso significa que, em telas menores, eles ocuparão toda a largura de 1fr e, à medida que atingirem 150px de largura cada, começarão a fluir para a mesma linha.

Com auto-fit, todas as faixas completamente vazias serão recolhidas para 0, e as faixas preenchidas preencherão o espaço. No entanto, se você mudar para auto-fill, as faixas vazias vão ocupar a mesma quantidade de espaço que teriam se preenchidas:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

HTML

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}