Jumlah dan Lebar Kolom di CSS Grid
Pengenalan bekerja dengan grid
kita mulai dengan menetapkan
jumlah dan lebar kolom, di mana
elemen-elemen anak akan ditempatkan.
Untuk tujuan ini kita menggunakan
properti grid-template-columns, yang ditentukan
pada elemen induk dan mengatur
jumlah dan lebar kolom, yang
akan ditempati oleh elemen-elemen anak dalam grid.
Dalam nilai properti, kita tentukan lebar kolom
dalam piksel.
Contoh
Pertama-tama mari buat elemen induk
dan menjadikannya grid-container.
Misalkan kita memiliki div, yang berisi
empat elemen anak. Mari tentukan untuknya
pada properti display nilai grid,
dan pada properti grid-template-columns
tuliskan lebar untuk dua kolom:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Sekarang mari buat tabel dengan empat kolom berukuran 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>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Tugas Praktis
Misalkan Anda memiliki div dengan sembilan elemen anak. Jadikan elemen induk sebagai grid-container.
Tempatkan elemen-elemen anak dalam dua
kolom dengan lebar 200px.
Tempatkan elemen-elemen anak dalam tiga
kolom dengan lebar 150px.
Tempatkan elemen-elemen anak dalam tiga
kolom: pertama lebar 100px,
kedua 150px, dan ketiga
200px.