Skip to main content

B.7.2.4. Grid Alignment

Pada chapter ini kita akan membahas mengenai Grid Alignment. Grid Alignment adalah serangkaian properti CSS yang memungkinkan teman-teman mengatur perataan grid secara keseluruhan di dalam Grid Container. Ini bermanfaat ketika ukuran grid lebih kecil daripada ukuran grid-container, sehingga grid bisa ditempatkan di posisi tertentu di dalam kontainer.

Terdapat 3 properti Grid Alignment, ada justify-content, align-content dan place-content. Apa itu? ayo kita bahas satu-persatu!

B.7.2.4.1. justify-content​

Properti justify-content digunakan untuk mengatur perataan grid secara horizontal di dalam grid-container. Properti ini berguna ketika grid tidak mengisi seluruh lebar grid-container, sehingga teman-teman bisa menentukan apakah grid harus berada di tengah, di awal, di akhir, atau tersebar secara merata.

Behaviour atau perilakunya sama saja seperti pada flex, namun jika teman-teman coba lakukan kilas balik, maka pada flex properti ini di gunakan untuk mengatur alignment pada sumbu utama dan sumbu utama di dalam flex bisa berubah sewaktu-waktu (bisa saja horizontal , bisa juga vertical) tergantung bagaimana properti flex-direction.

Pada grid ini tidak berpengaruh, Grid Layout adalah sistem dua dimensi, yang berarti grid bisa memiliki banyak baris dan kolom. justify-contentdalam grid mengatur perataan dari seluruh grid (bukan tiap item) secara horizontal di dalam grid-container, dan arah perataan selalu horizontal.

Jadi jika teman-teman memakai properti justify-content pada grid, maka sudah pasti itu digunakan untuk mengatur alignment secara horizontal ya.

Nilai yang bisa teman-teman pakai pun sama, ada start, center, end, space-between, space-evenly dan space-around. Coba perhatikan kode berikut:

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Output dari kode di atas akan terlihat seperti:

Output

Jika teman-teman ingin memindahkan ketiga item di atas ke tengah-tengah secara horizontal, teman-teman bisa menambahkan properti justify-content:center; pada grid-container-justify-content:

.grid-container {
  /*.....*/
  justify-content: center;
}

.grid-item {
  /*.....*/
}

Maka hasilnya akan terlihat seperti:

Output

Teman-teman bisa ber-eksperimen dengan nilai-nilai yang lain ya!

Teman-teman bisa menambah jumlah grid items untuk ber-eksperimen dengan menggunakan properti align-content, pastikan grid-template-rows nya di set juga ya!

B.7.2.4.2. align-content​

Properti align-content digunakan untuk mengatur perataan grid secara vertical di dalam Grid Container. Cara kerjanya sama seperti justify-content, tetapi diterapkan secara vertical.

Contohnya, teman-teman ingin menempatkan elemen-elemen sebelumnya di tengah-tengah secara vertical juga, maka cukup tambahkan align-content:center; pada grid-container.

.grid-container {
  /*.....*/
  align-content: center;
}

.grid-item {
  /*.....*/
}

Maka hasilnya akan terlihat seperti:

Output

Wah keren sekali ya:D teman-teman pun bisa melakukan eksperimen dengan ini ya!

B.7.2.4.3. place-content​

Properti place-content adalah shorthand untuk justify-content dan align-content. Dengan menggunakan place-content, teman-teman bisa mengatur perataan grid secara horizontal dan vertical dalam satu baris kode. Sintaknya kurang lebih seperti ini:

place-content: <align-content> <justify-content>;

Nah untuk mencobanya, bagaimana kalau kita coba ubah kode sebelumnya dengan menggunakan shorthand place-content ini? coba teman-teman perhatikan kode berikut:

.grid-container {
  /*.....*/
  place-content: center space-between;
}

.grid-item {
  /*.....*/
}

Hasil dari kode di atas adalah elemen akan berada di tengah secara vertical dan akan berjarak mengisi ruang secara horizontal:

Output

Sangat powerfull bukan🥳? teman-teman bisa menggunakan ketika properti di atas sesuai dengan kebutuhan masing-masing ya!

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.4-grid-alignment