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!