Atributo CSS grid-column-end

Definição e uso

A propriedade grid-column-end determina quantas colunas o item deve cruzar ou na qual linha de coluna (column-line) o item deve terminar.

Veja o exemplo no final da página.

Veja também:

Tutorial CSS:Layout de grade CSS

Exemplo

Exemplo 1

Faz com que "item1" cubra três colunas:

.item1 {
  grid-column-end: span 3;
}

Experimente você mesmo

Exemplo 2

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

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

Experimente você mesmo

Sintaxe do CSS

grid-column-end: auto|span n|column-line;

Valor da propriedade

Valor Descrição
auto Valor padrão. O item cruzará uma coluna.
span n Determina o número de colunas que o item deve cruzar.
column-line Determina na qual coluna o item deve parar de ser exibido.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Suporte. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grade CSS Nível 1
Sintaxe do JavaScript: object.style.gridColumnEnd="5"

Suporte do navegador

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

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