DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

GRID REPEAT, MINMAX DAN AUTOFILL

Pelajari tentang Grid repeat, minmax dan autofill dalam CSS Grid untuk membuat layout halaman webmu lebih efisien dan responsif.

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!

👈🏼 fr css grid
Grid template area 👉🏼