Recomendação de curso:

Função fit-content() do CSS

Definição e uso do CSS fit-content() A função permite ajustar o tamanho do elemento com base no conteúdo. Esse método é semelhante ao elemento usar o espaço disponível, mas nunca exceder o tamanho do conteúdo máximo.

Exemplo

Usar fit-content() Ajustar o tamanho das colunas da grade:

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

Experimente você mesmo

Sintaxe do CSS

fit-content(length|percentage)
Valor Descrição
length Especificar o valor da medida absoluta do tamanho.
percentage Especificar o tamanho em porcentagem em relação ao espaço disponível.

Detalhes técnicos

Versão: CSS4

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Páginas relacionadas

Referência:Atributo grid-auto-columns do CSS

Referência:Atributo grid-auto-rows do CSS

Referência:Atributo CSS grid-template-columns

Referência:Atributo CSS grid-template-rows