ALIGNMENT CSS GRID

Mengatur tata letak elemen pada sebuah situs web bisa menjadi tantangan tersendiri. Kamu ingin semuanya tampak rapi, dan salah satu cara untuk mencapai ini adalah dengan menggunakan penyejajaran dalam CSS Grid.

Apa itu CSS Grid?

CSS Grid adalah sebuah teknik layouting dalam CSS yang memungkinkan kamu untuk mendesain interface situs web dengan cara yang lebih fleksibel dan canggih. Dengan Grid, kamu dapat dengan mudah mengubah posisi elemen, bahkan dalam tata letak yang rumit sekalipun.

Bagaimana Cara Kerja CSS Grid?

Grid bekerja dengan membuat sebuah sistem baris dan kolom yang bisa kamu definisikan sendiri. Kamu dapat menyejajarkan item ke sel grid mana pun yang kamu inginkan.

Menggunakan Penyejajaran dalam CSS Grid

Ada beberapa cara untuk menyejajarkan item dalam Grid. Salah satu metode yang paling umum adalah dengan menggunakan properti justify-items, align-items, justify-content, dan align-content.

Properti Justify-items

Properti justify-items memungkinkan kamu untuk mengontrol sejauh mana item diletakkan di sepanjang baris grid.

.container {
  display: grid;
  justify-items: start;
}

Dalam contoh di atas, semua item dalam kontainer akan diletakkan di awal setiap baris.

Properti Align-items

Sama seperti justify-items, tapi untuk kolom. Ini memungkinkan kamu untuk mengontrol bagaimana item sejajar di sepanjang kolom grid.

.container {
  display: grid;
  align-items: end;
}

Dalam contoh di atas, semua item akan diletakkan di akhir setiap kolom.

Properti justify-content dan align-content

Properti justify-content dan align-content mirip dengan justify-items dan align-items. Namun, mereka menyejajarkan konten grid secara keseluruhan daripada item individu.

.container {
  display: grid;
  justify-content: space-between;
  align-content: center;
}

Dalam contoh ini, ruang akan didistribusikan secara merata antara baris dan semua konten akan dipusatkan di sepanjang kolom.

Ingatlah bahwa menguasai penyejajaran dalam CSS Grid membutuhkan banyak praktek. Jadi, teruslah eksperimen dengan kode Anda sendiri untuk memahami cara kerjanya. Semoga berhasil!