Grid: Alignment

Modul 3: Alignment in Grid Layout

Alignment dalam Grid Layout sangat penting untuk mengatur posisi dan penempatan grid items serta konten grid secara keseluruhan. Berikut adalah beberapa properti yang digunakan untuk mengontrol alignment dalam Grid Layout:

1. justify-items, align-items, dan place-items: Properti ini mengontrol alignment dari grid items di dalam grid container.

   • justify-items: Mengatur alignment secara horizontal.

   • align-items: Mengatur alignment secara vertikal.

   • place-items: Kombinasi singkat dari justify-items dan align-items.

Contoh:

.container {
  display: grid;
  justify-items: center; /* Mengatur alignment horizontal menjadi center */
  align-items: center; /* Mengatur alignment vertikal menjadi center */
}

1. justify-content, align-content, dan place-content: Properti ini mengontrol alignment dari konten grid (seluruh grid) di dalam grid container.

   • justify-content: Mengatur alignment secara horizontal.

   • align-content: Mengatur alignment secara vertikal.

   • place-content: Kombinasi singkat dari justify-content dan align-content.

Contoh:

.container {
  display: grid;
  justify-content: center; /* Mengatur alignment horizontal konten menjadi center */
  align-content: center; /* Mengatur alignment vertikal konten menjadi center */
}

1. justify-self, align-self, dan place-self: Properti ini mengontrol alignment dari grid items di dalam grid cells masing-masing.

   • justify-self: Mengatur alignment secara horizontal.

   • align-self: Mengatur alignment secara vertikal.

   • place-self: Kombinasi singkat dari justify-self dan align-self.

Contoh:

.item {
  justify-self: end; /* Mengatur alignment horizontal item menjadi end di dalam cell */
  align-self: start; /* Mengatur alignment vertikal item menjadi start di dalam cell */
}

Dengan menggunakan properti-properti alignment ini, Anda dapat mengontrol posisi dan penempatan grid items serta konten grid sesuai dengan kebutuhan desain web Anda.