Sifat CSS grid-template-columns

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 tata letak grid empat kolom, dan tentukan ukuran setiap kolom:

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

Coba sendiri

Syarat CSS

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

Nilai atribut

Nilai Deskripsi
none Nilai lalai. 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 lalai. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknologi

Nilai lalai: none
Warisan: Tidak
Pembuatan animasi: Dukungan. Lihat:Atribut berkaitan animasi.
Versi: Modul Layout Grid CSS Level 1
Syarat Bahasa JavaScript: object.style.gridTemplateColumns="50px 50px 50px"

Dukungan browser

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

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