Skip to content

Latest commit

 

History

History
26 lines (17 loc) · 1.56 KB

README.md

File metadata and controls

26 lines (17 loc) · 1.56 KB
Raw

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()