Функсияи repeat дар CSS grid
Агар шумо якчанд сутун дошта бошед,
ки барои онҳо андозаҳои якхела таъин карда мешаванд,
пас шумо метавонед навиштани кодро сода кунед, бо истифода аз
функсияи repeat.
Дар параметри якуми ин функсия
шумораи сутунҳо, ва дар дуввумӣ - паҳнои онҳо мушаххас карда мешавад.
Биёед бо мисолҳо дида бароем,
ки ин чӣ гуна кор мекунад.
Мисол
Бигзор мо се сутуни якхелаи андоза дошта бошем:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Навиштани кодро бо истифода аз repeat сода кунем:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Мисол
Бигзор мо се сутуни якхелаи андоза, ва сутуни чаҳорум андозаи дигар дошта бошем:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Навиштани кодро бо истифода аз repeat сода кунем:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Мисол
Бигзор мо се сутуни аввал як андоза, ва се сутуни дигар андозаи дигар дошта бошем:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Навиштани кодро бо истифода аз repeat сода кунем:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Мисол
Бигзор мо се сутуни аввал як андоза, пас як сутуни дигар, ва пас боз се сутуни андозаи дигар дошта бошем:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Навиштани кодро бо истифода аз repeat сода кунем:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Мисол
Содакунӣ барои ҳама воҳидҳои андоза кор мекунад. Бигзор барои мисол мо се сутун бо воҳиди пиксел дошта бошем:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Навиштани кодро бо истифода аз repeat сода кунем:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Вазифаҳои амалӣ
4 сутуни якхелаи
андоза тавассути repeat созед.
4 сутун бо андозаи 100px,
ва боз 3 сутун бо андозаи 2fr созед.
2 сутун бо андозаи 100px,
3 сутун бо андозаи 200px,
пас як сутун бо андозаи 1fr,
ва пас 2 сутун
бо андозаи 10% созед.
