Skip to main content

B.7.2.6. Item Place

Pada chapter ini kita akan membahas mengenai Item Place. Item Place adalah cara untuk menentukan posisi grid item secara spesifik di dalam grid-container. Dengan properti grid-columndan grid-row, teman-teman bisa mengatur grid item agar berada di lokasi tertentu, dan menciptakan layout yang lebih kompleks lagi.

B.7.2.6.1. grid-column​

Properti grid-column digunakan mengontrol area horizontal yang ditempati oleh grid item, teman-teman bisa melihat sintaks dari properti grid-column:

grid-column: start / end;

Dimana start menunjuk garis awal tempat elemen dimulai pada kolom dan end menunjuk garis akhir tempat elemen berakhir pada kolom.

Contohnya kita akan membuat sebuah galeries section pada website kita, dimana kita akan memiliki 6 gambar di dalamnya. So, teman-teman bisa menyiapkan gambar nya terlebih dahulu dan bisa teman-teman salin kode di bawah ini, lalu edit src gambarnya ke punya teman-teman ya.

<div class="galeries">
  <img src="images/image-1.jpeg" class="grid-item item-1" />
  <img src="images/image-2.jpeg" class="grid-item item-2" />
  <img src="images/image-1.jpeg" class="grid-item item-3" />
  <img src="images/image-2.jpeg" class="grid-item item-4" />
  <img src="images/image-1.jpeg" class="grid-item item-6" />
  <img src="images/image-2.jpeg" class="grid-item item-6" />
</div>

Output dari kode di atas akan terlihat seperti:

Output

Bisa temen-temen lihat, hasilnya gepeng ya. ini terjadi karena kita punya gambar yang sebenarnya berukuran potrait tetapi kita jadikan image tersebut ke-dalam aspect-ratio: 4/3 yang dimana akan membuat gambar tadi menjadi sedikit landscape dan akhirnya terlihat gepeng.

Nah solusinya kita bisa merubah objek gambar nya ke cover dengan properti object-fit, dan kita akan highlight bagian bawah dari object atau fotonya dengan properti object-position berikut kodenya.

Pengen keliatan foto pasir & semak-semak nya jadi highlight bagian bawah fotonya hehe:D

.grid-item {
  /*.....*/
  object-fit: cover;
  object-position: center;
}

Maka sekarang seharusnya sudah tidak gepeng lagi:

Output

Lalu setelahnya teman-teman ingin item-1 menempati mulai dari kolom pertama hingga kolom sebelum 3, teman-teman bisa mengaturnya dengan properti grid-column:

.item-1 {
  grid-column: 1 / 3;
}

Maka sekarang item-1 akan memiliki rentang hingga kolom 1 dan kolom sebelum 3 (2 kolom):

Output

Nah teman-teman bisa mempersingkat rentang tersebut dengan menggunakan keyword span, jadi nanti seperti ini:

.item-1 {
  grid-column: span 2;
}

Artinya kita akan membuat item-1 memiliki rentang 2 kolom, dan hasilnya akan sama saja:

Output

Lho kemana perginya item-item yang lain ya🤔? nah kita akan coba membuat pengaturan yang lebih kompleks lagi dengan mengkombinasikannya dengan properti grid-row.

B.7.2.6.2. grid-row​

Properti grid-row digunakan mengontrol area vertical yang ditempati oleh grid item, sintaks grid-row masih sama dengan grid-column yaitu seperti ini:

grid-column: start / end;

Nah sekarang, teman-teman ingin membuat rentang vertical dari item-1 menjadi 2 baris juga agar item-3 naik mengisi kekosongan di bawah item-2:

.item-1 {
  grid-column: 1/3;
  grid-row: 1 / 3;
}

Sekarang item-1 akan memiliki rentang baris di mulai dari baris ke 1 hingga baris sebelumnya 3, dan hasilnya akan terlihat rapih sekarang:

Output

Nah jadi itu pembahasan mengenai Item Place pada grid item, untuk lebih memahami lebih dalam mengenai grid-column dan grid-row teman-teman bisa melakukan eksperimen dengan membuat layout yang lebih kompleks lagi.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.7-css-layouting/B.7.2-grid/B.7.2.6-item-place