Properti grid-column-end CSS

Definisi dan penggunaan

Atribut grid-column-end menentukan berapa banyak kolom yang akan dilintasi item, atau di garis kolom mana (column-line) item akan berhenti.

Lihat contoh di belakang halaman.

Lihat pula:

Panduan CSS:Susunan Grid CSS

Contoh

Contoh 1

Lengkapkan "item1" untuk melintasi tiga kolom:

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

Coba sendiri

Contoh 2

Anda dapat menggunakan nilai garis kolom untuk menggantikan jumlah kolom yang akan dilintasi:

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

Coba sendiri

Sintaksis CSS

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

Nilai atribut

Nilai Deskripsi
auto Nilai standar. Item akan melintasi satu kolom.
span n Tentukan berapa banyak kolom yang akan dilintasi item.
column-line Tentukan di kolom mana tampilan item berhenti.

Detil teknis

Nilai standar: auto
Warisan: Tidak
Produksi animasi: Dukungan. Lihat:Atribut yang berhubungan dengan animasi.
Versi: Modul Susunan Grid CSS Level 1
Sintaksis JavaScript: object.style.gridColumnEnd="5"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuhnya.

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