Folha de Atalhos de Layout CSS Grid

Esta página fornece uma folha de atalhos visual para layout CSS Grid, incluindo propriedades principais para contêineres e itens de grade, além de exemplos práticos de layout.

Contêiner de Grade (Grid Container)

Propriedade	Valor	Descrição
`display`	`grid`	Define o elemento como um contêiner de grade
`grid-template-columns`	`100px 1fr`	Define a largura das colunas
`grid-template-rows`	`100px 1fr`	Define a altura das linhas
`grid-template-areas`	`header header` `sidebar main` `footer footer`	Define a grade nomeando áreas
`grid-column-gap`	`10px`	Define o espaço entre as colunas
`grid-row-gap`	`10px`	Define o espaço entre as linhas
`grid-gap`	`10px 20px`	Define simultaneamente o espaço entre linhas e colunas
`justify-items`	`start`	Alinha os itens da grade horizontalmente dentro das células
`align-items`	`start`	Alinha os itens da grade verticalmente dentro das células
`justify-content`	`start`	Alinha toda a grade horizontalmente dentro do contêiner
`align-content`	`start`	Alinha toda a grade verticalmente dentro do contêiner

Itens de Grade (Grid Items)

Propriedade	Valor	Descrição
`grid-column`	`1 / 3`	Define as colunas ocupadas pelo item
`grid-row`	`1 / 3`	Define as linhas ocupadas pelo item
`grid-area`	`header`	Posiciona itens de grade nomeando áreas
`justify-self`	`start`	Alinha um item individual horizontalmente dentro de sua célula
`align-self`	`start`	Alinha um item individual verticalmente dentro de sua célula
`grid-column-start`	`1`	Define a linha de início da coluna
`grid-column-end`	`3`	Define a linha de fim da coluna
`grid-row-start`	`1`	Define a linha de início da linha
`grid-row-end`	`3`	Define a linha de fim da linha

Exemplo de Media Query

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Outros Exemplos

Layout de duas colunas

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Layout de três colunas

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Centralização vertical

.container {
  display: grid;
  align-items: center;
}

Centralização horizontal

.container {
  display: grid;
  justify-items: center;
}