CSS GRID

GRID

  • Bimensional
  • Divisão de toda a página em linhas e colunas
  • Colocar elementos onde quiser nessa divisão

GRID OU FLEXBOX

  • Grid: Duas dimensões (colunas e linhas)
  • Flexbox: Uma dimensão (ou coluna ou linha)
  • Um complementa o trabalho do outro
  • Verificar quais navegadores ainda não estão aceitando o Grid

PROPRIEDADES

Vamos separar em 2 grupos: container e item(s)


CONTAINER

  • display: grid;
  • grid-template-columns;
  • grid-template-rows;
  • grid-gap
    • grid-row-gap
    • grid-column-gap
  • grid-template-areas;

... e mais 4 propriedades e alinhamento!


ITEM(s)

  • grid-column
    • grid-column-start
    • grid-column-end
  • grid-row
    • grid-row-start
    • grid-row-end
  • grid-area

... e mais 2 propriedades de alinhamento!