Atribut grid-template-columns CSS

Definisi dan penggunaan

Atribut grid-template-columns menentukan jumlah kolom (dan lebar) dalam layout grid.

Nilai ini adalah daftar yang dipisahkan dengan spasi, di mana setiap nilai menentukan ukuran kolom yang relevan.

Lihat juga:

Panduan CSSLayout Grid CSS

Panduan referensi CSSAtribut grid-template-rows

Panduan referensi CSSAtribut grid-template

Contoh

Contoh 1

Buat kontainer grid empat kolom:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Coba sendiri

Contoh 2

Buat layout grid empat kolom, dan tentukan ukuran setiap kolom:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

Coba sendiri

Sintaksis CSS

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Nilai atribut

Nilai Deskripsi
none Nilai default. Buat kolom saat diperlukan.
auto Ukuran kolom tergantung ukuran kontainer serta ukuran konten item di kolom.
max-content Atur ukuran setiap kolom berdasarkan item terbesar di kolom.
min-content Atur ukuran setiap kolom berdasarkan item terkecil di kolom.
length Atur ukuran kolom, melalui penggunaan nilai panjang yang sah. Lihat:Satuan panjang.
initial Atur atribut ini ke nilai default. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: none
Inheritance: Tidak
Pembuatan animasi: Dukungan. Lihat:Properti animasi.
Versi: Modul Layout Grid CSS Level 1
Sintaksis JavaScript: object.style.gridTemplateColumns="50px 50px 50px"

Dukungan browser

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

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