Grid: Grid Auto Flow

Grid Auto Flow

Properti grid-auto-flow memungkinkan Anda mengontrol cara penempatan grid items tambahan (yang tidak didefinisikan secara eksplisit dalam grid) di dalam grid container. Berikut adalah penjelasan tentang properti ini:

• grid-auto-flow: Properti ini mengontrol arah dan urutan di mana grid items tambahan ditata dalam grid container. Properti ini memiliki beberapa nilai yang dapat digunakan:

  • row: Grid items ditata dari kiri ke kanan, secara horizontal, mulai dari baris pertama. Ketika baris penuh, item-item baru ditata pada baris baru di bawahnya.

  • column: Grid items ditata dari atas ke bawah, secara vertikal, mulai dari kolom pertama. Ketika kolom penuh, item-item baru ditata pada kolom baru di sebelah kanannya.

  • dense: Grid items ditata secara rapat, sehingga grid container akan mencoba mengisi sel-sel kosong yang tersedia, meskipun itu berarti melewati item lain yang telah ditata sebelumnya.

Contoh:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-auto-flow: row; /* Grid items akan ditata dari kiri ke kanan, secara horizontal */
}

Dengan menggunakan properti grid-auto-flow, Anda dapat mengatur cara penempatan grid items tambahan dalam grid container dengan lebih fleksibel, terutama saat Anda memiliki lebih banyak item daripada yang didefinisikan dalam struktur grid yang telah Anda tetapkan.