-
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á apenasuma
coluna em dispositivos mobile. 18rem
como tamanho mímimo: se o grid conseguir encaixar duas colunas com18rem
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.
- utilizando
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()