GRID REPEAT, MINMAX DAN AUTOFILL

CSS Grid telah membawa banyak kemudahan dalam membuat layout halaman web. Dalam artikel ini, kita akan mempelajari lebih lanjut tentang tiga konsep penting dalam CSS Grid yaitu grid-repeat, minmax dan autofill.

Grid-Repeat

Fungsi grid-repeat() memungkinkan kamu untuk membuat grid line dan track yang berulang dengan mudah dan singkat.

Syntaxnya adalah repeat(jumlahUlang, ukuranTrack).

Contoh penggunaannya:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Dalam contoh di atas, kita membuat 3 kolom dengan ukuran setiap kolom adalah 1fr (fractional unit).

Minmax

Fungsi minmax() berguna untuk menentukan range ukuran grid track minimum dan maksimum.

Syntaxnya adalah minmax(minimum, maksimum).

Contoh penggunaannya:

.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, auto);
}

Pada contoh di atas, ukuran minimum dari kolom adalah 100px dan ukuran maksimum akan disesuaikan secara otomatis oleh browser (auto).

Autofill

Properti autofill membantu dalam pengisian grid cell secara otomatis sesuai dengan space yang tersedia.

Saat menggunakan autofill, browser akan mencoba memasukkan sebanyak mungkin kolom atau baris ke dalam grid, dan otomatis menyesuaikan ukurannya untuk mengisi ruang kosong yang tersedia.

Contoh penggunaannya:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Pada contoh di atas, ukuran minimal setiap kolom adalah 100px dan ukuran maksimum adalah 1fr. Browser akan mencoba memasukkan sebanyak mungkin kolom ke dalam grid dan otomatis menyesuaikan ukurannya.

Semoga penjelasan di atas dapat membantu kamu dalam memahami Grid repeat, minmax dan autofill dalam CSS Grid. Selamat mencoba!