Fungsi repeat dalam CSS Grid
Jika Anda memiliki beberapa kolom,
yang ukurannya ditetapkan sama,
maka Anda dapat menyederhanakan penulisannya dengan menggunakan
fungsi repeat.
Pada parameter pertama fungsi ini ditentukan
jumlah kolom, dan pada parameter kedua - lebarnya.
Mari kita lihat contoh-contohnya,
bagaimana cara kerjanya.
Contoh
Misalkan kita memiliki tiga kolom dengan ukuran yang sama:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Sederhanakan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Contoh
Misalkan kita memiliki tiga kolom dengan ukuran yang sama, dan kolom keempat dengan ukuran berbeda:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Sederhanakan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Contoh
Misalkan tiga kolom pertama memiliki satu ukuran, dan tiga kolom berikutnya memiliki ukuran berbeda:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Sederhanakan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Contoh
Misalkan tiga kolom pertama memiliki satu ukuran, lalu ada kolom lain, dan kemudian tiga kolom lagi dengan ukuran berbeda:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Sederhanakan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Contoh
Penyederhanaan bekerja untuk semua satuan ukuran. Misalnya, kita memiliki tiga kolom dalam piksel:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Sederhanakan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Tugas Praktis
Buatlah 4 kolom dengan
ukuran yang sama menggunakan repeat.
Buatlah 4 kolom berukuran 100px,
dan 3 kolom lagi berukuran 2fr.
Buatlah 2 kolom berukuran 100px,
3 kolom lagi berukuran 200px,
lalu kolom berukuran 1fr,
dan kemudian 2 kolom
berukuran 10%.
