A função minmax() define o intervalo para o tamanho de uma faixa da grade, especificando quanto espaço uma linha ou coluna pode ocupar. Lembre-se que você pode definir o tamanho da faixa com unidades como px (pixels), rem ou até mesmo em e com unidades fracionárias (fr). A função minmax() vai um pouco além ao permitir que você defina um tamanho mínimo e um tamanho máximo para a faixa da grade. Aqui está a sintaxe da função minmax():

minmax(min, max)

min é o tamanho mínimo da faixa da grade, que pode ser definido usando pixels, porcentagem ou auto. E max é o tamanho máximo da faixa da grade que você pode definir com as mesmas unidades. Os dois valores funcionam juntos desta forma:

• O valor min garante que a faixa da grade nunca encolherá abaixo de um tamanho definido.
• O valor max limita o quanto a faixa da grade pode crescer.

O tamanho da faixa da grade ajusta-se dinamicamente entre os valores min e max com base no conteúdo e no tamanho do contêiner. Vamos ver um exemplo prático:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div>
    <h2>Item 1</h2>
  </div>
  <div>
    <h2>Item 2</h2>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 300px) 1fr;
  gap: 20px;
}

.grid-container > div {
  background: crimson;
  padding: 20px;
  text-align: center;
}

O que está acontecendo aqui?  A primeira coluna, minmax(150px, 300px), sempre terá pelo menos 150px e no máximo 300px, dependendo do espaço disponível. Por outro lado, a segunda coluna, 1fr, ocupará qualquer espaço restante disponível no contêiner da grade já que não há colunas adicionais para compartilhar o espaço. A vantagem da função minmax() sobre tamanhos fixos e até unidades fr é que ela é mais flexível, tornando-a ideal para adaptabilidade e responsividade.