Properti grid-template-columns
Properti grid-template-columns menentukan
jumlah dan lebar kolom yang
akan ditempati oleh elemen dalam grid atau kisi.
Properti ditentukan dalam elemen induk
dan menentukan lebar kolom elemen-elemen turunan.
Dalam nilai properti, kita tentukan lebar kolom
dalam satuan
untuk ukuran apapun.
Ketika menentukan nilai dalam piksel pada properti,
ukuran kolom akan persis sesuai dengannya.
Jika kita memberikan kata kunci auto, maka kolom akan
mengisi semua ruang yang tersedia. Penggunaan
satuan fr (fraksi) berarti
bahwa semua ruang akan dibagi
menjadi bagian yang sama. Keuntungan
fr adalah kemampuannya beradaptasi dengan
berbagai kontainer atau resolusi layar,
karena fr hanya membaginya menjadi jumlah
fraksi yang ditentukan tanpa terikat pada ukuran pasti dalam piksel.
Sintaks
selektor {
grid-template-columns: lebar kolom;
}
Contoh
Mari tentukan lebar kolom untuk elemen-elemen kita dalam grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Mari berikan kolom pertama dan ketiga lebar tetap dalam piksel, dan biarkan kolom kedua secara otomatis mengisi ruang yang tersedia:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sekarang dengan menggunakan properti
grid-template-columns
buatlah agar kolom pertama dan kedua
menempati satu bagian kontainer,
dan kolom ketiga - tiga bagian:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Nilai yang ditentukan dalam satuan fr
dapat berbentuk pecahan. Mari
ubah contoh sebelumnya, dengan menentukan
untuk kolom kedua dan ketiga lebar
dalam bilangan pecahan:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Mari dalam properti grid-template-columns
tentukan fungsi repeat(),
yang akan memberi tahu kontainer bahwa semua
tiga kolom harus memiliki lebar yang sama:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sekarang mari ubah contoh sebelumnya agar ke tiga kolom yang sama ditambahkan kolom keempat, yang akan menempati dua fraksi kontainer:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Mari berikan dua kolom pertama lebar satu fraksi kontainer, dan dua kolom terakhir - dua fraksi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sekarang mari atur lebar kolom
dengan mengkombinasikan nilai yang ditentukan menggunakan
fungsi repeat() dan satuan bebas fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Juga dalam fungsi repeat() dapat ditentukan
nilai auto-fill, yang akan mengisi
kontainer kita dengan kolom-kolom identik dengan lebar yang kita inginkan:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sangat mudah untuk bersama dengan auto-fill
menentukan fungsi minmax,
yang menetapkan rentang lebar kolom
dari nilai minimum hingga maksimum.
Jika lebar kontainer tidak dapat memuat semua
kolom, maka beberapa di antaranya akan berpindah
ke baris baru, dengan kolom-kolom dalam baris
tersebut akan terdistribusi secara merata di dalamnya. Mari ubah
contoh sebelumnya, tentukan di dalamnya fungsi minmax.
Untuk melihat berbagai opsi penempatan kolom
ubah lebar halaman browser Anda:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sekarang mari tentukan properti auto-fit,
yang perbedaannya dari auto-fill terletak pada,
bahwa properti ini menyesuaikan jumlah kolom dengan
lebar kontainer yang tersedia, memperlebar atau
menyempitkannya:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Juga bersama dengan fr dapat
digunakan nilai dalam %, yang juga menentukan
bagian kontainer mana yang akan ditempati oleh kolom.
Dengan demikian, pertama-tama ukuran
kolom dalam % akan dihitung,
dan ruang kosong yang tersisa
akan dibagi menjadi fraksi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Mari gunakan bersama properti
grid-template-columns dan
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Mari dengan menggunakan properti
grid-template-columns dan
grid-template-rows
buat tabel dari sembilan sel, yang terletak
dalam tiga baris. Dimana baris kedua dan ketiga akan memiliki lebar yang sama,
dan setiap kolom - lebar yang berbeda:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sekarang dalam tabel dari contoh sebelumnya buatlah baris atas selebar dua fraksi, dan kolom pertama - setengah fraksi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Lihat juga
-
properti
grid-template-rows,
yang menentukan jumlah dan lebar baris dalam grid -
properti
grid-auto-columns,
yang menentukan jumlah dan lebar kolom dalam grid implisit
