Atributo grid-column do CSS

Definição e uso

A propriedade grid-column define o tamanho do item da grade e sua posição no layout da grade, e é uma abreviação dos seguintes atributos:

Veja também:

Tutorial CSS:Layout de grade CSS

Exemplo

Exemplo 1

Faz com que "item1" comece na coluna 1 e spanne duas colunas:

.item1 {
  grid-column: 1 / span 2;
}

Experimente você mesmo

Exemplo 2

Você pode usar valores de linha de coluna em vez do número de colunas a serem cruzadas:

.item1 {
  grid-column: 1 / 3;
}

Experimente você mesmo

Sintaxe do CSS

grid-column: grid-column-start / grid-column-end;

Valor da propriedade

Valor Descrição
grid-column-start Define a partir de qual coluna deve começar a exibição do item.
grid-column-end Define na qual linha de coluna (column-line) deve parar a exibição do item, ou跨度quantas colunas.

Detalhes técnicos

Valor padrão: auto / auto
Herança: Não
Produção de animação: Suporte. Veja também:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grade CSS Level 1
Sintaxe do JavaScript: object.style.gridColumn="2 / span 2"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44