Módulo de layout de grade CSS

Cabeçalho
Menu
Principal
Direita
Rodapé

Experimente você mesmo

Disposição da grade

O módulo de layout de grade CSS (CSS Grid Layout Module) oferece um sistema de layout baseado em grade com linhas e colunas, tornando o design da página da web mais fácil, sem a necessidade de usar flutuantes e alinhamento.

Suporte do navegador

Todos os navegadores modernos suportam as propriedades da grade.

57.0 16.0 52.0 10 44

Elementos da grade

A disposição da grade é composta por um elemento pai e um ou mais elementos filhos.

Exemplo

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Experimente você mesmo

Atributo Display

quando o atributo HTML display a propriedade é definida como grid ou inline-grid neste caso, ele se torna um contêiner de grade.

Exemplo

.grid-container {}}
  display: grid;
}

Experimente você mesmo

Exemplo

.grid-container {}}
  display: inline-grid;
}

Experimente você mesmo

Todos os elementos diretamente filhos do contêiner da grade se tornam automaticamente itens da grade.

Colunas da grade (Grid Columns)

A linha vertical dos itens da grade é chamada de coluna.

Linhas da grade (Grid Rows)

A linha horizontal dos itens da grade é chamada de linha.

Espaçamento da grade (Grid Gaps)

O intervalo entre cada coluna/linha é chamado de间隙。

Você pode ajustar o tamanho do espaçamento usando uma das seguintes propriedades:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Exemplo

grid-column-gap A propriedade define o espaçamento entre as colunas:

.grid-container {}}
  display: grid;
  grid-column-gap: 50px;
}

Experimente você mesmo

Exemplo

grid-row-gap A propriedade define o espaçamento entre as linhas:

.grid-container {}}
  display: grid;
  grid-row-gap: 50px;
}

Experimente você mesmo

Exemplo

grid-gap Esta propriedade é uma abreviação das propriedades grid-row-gap e grid-column-gap:

.grid-container {}}
  display: grid;
  grid-gap: 50px 100px;
}

Experimente você mesmo

Exemplo

grid-gap A propriedade pode ser usada para definir o espaçamento entre linhas e colunas como um valor único:

.grid-container {}}
  display: grid;
  grid-gap: 50px;
}

Experimente você mesmo

Linhas de grade (Grid Lines)

As linhas entre as colunas são chamadas de linhas de coluna (column lines).

As linhas entre as linhas são chamadas de linhas de linha (row lines).

Ao colocar o item de grade no container de grade, cite o número da linha:

Exemplo

Coloque o item de grade na coluna 1 e termine na coluna 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Experimente você mesmo

Exemplo

Coloque o item de grade na linha 1 e termine na linha 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Experimente você mesmo