Grid auto-fit

Criando layouts com CSS Grid de forma fácil

---

grid-template-columns: repeat(auto-fit, minmax(min, max))

• repeat(): enquanto houver a possibilidade de criar colunas, faça.

• auto-fit: encaixe as colunas no layout, com tamanho variável. Mas qual tamanho?

• minmax(): função que define o tamanho das colunas. O primeiro argumento da função é o tamanho MÍNIMO da coluna, e o segundo, o tamanho MÁXIMO. Exemplo: minmax(200px, 500px). A coluna terá um tamanho mínimo de 200 píxels e um máximo de 500 píxels. Enquanto houver a possibilidade de enxaicar as colunas tomando como base 200 píxels, o grid irá fazer.

• No exemplo do código: grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

  • utilizando 1fr como tamanho máximo: auxilia na responsividade. Se definirmos um tamanho mínimo coerente, 1fr definirá apenas uma coluna em dispositivos mobile.
  • 18rem como tamanho mímimo: se o grid conseguir encaixar duas colunas com 18rem de tamanho MAIS o gap definido, uma coluna é adicionada. Enquanto a adição não ocorre, a coluna em questão é esticada, pois o tamanho máximo definido é variável também.

Referências:

CSS Grid https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Grid Template Columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

Minmax() https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()