Fungsi repeat dalam CSS Grid
Jika anda mempunyai beberapa lajur
yang ditetapkan saiz yang sama,
anda boleh memudahkan penulisan dengan menggunakan
fungsi repeat.
Parameter pertama fungsi ini menentukan
bilangan lajur, dan yang kedua - lebarnya.
Mari kita lihat contoh
bagaimana ia berfungsi.
Contoh
Katakan kita mempunyai tiga lajur yang sama saiz:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Permudahkan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Contoh
Katakan kita mempunyai tiga lajur yang sama saiz, dan lajur keempat dengan saiz yang berbeza:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Permudahkan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Contoh
Katakan tiga lajur pertama mempunyai satu saiz, dan tiga lajur seterusnya mempunyai saiz yang berbeza:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Permudahkan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Contoh
Katakan tiga lajur pertama mempunyai satu saiz, kemudian satu lajur, dan kemudian tiga lajur lagi dengan saiz yang berbeza:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Permudahkan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Contoh
Pemudahan ini berfungsi untuk sebarang unit saiz. Katakan sebagai contoh kita mempunyai tiga lajur dalam piksel:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Permudahkan penulisan dengan repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Tugas Praktikal
Buatkan 4 lajur yang sama
saiz menggunakan repeat.
Buatkan 4 lajur bersaiz 100px,
dan 3 lajur lagi bersaiz 2fr.
Buatkan 2 lajur bersaiz 100px,
3 lajur lagi bersaiz 200px,
kemudian satu lajur bersaiz 1fr,
dan kemudian 2 lajur
bersaiz 10%.
