CSS Grid функциясындағы repeat функциясы
Эгер сизде бирдей өлчөмдөргө ээ болгон бир нече тилкелер болсо,
анда жазууну жөнөкөйлөтүү үчүн,
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);
}
Практикалык тапшырмалар
repeat функциясын колдонуп,
4 тилкени бирдей өлчөмдө жасагыла.
4 тилкени 100px өлчөмүндө,
жана дагы 3 тилкени 2fr өлчөмүндө жасагыла.
2 тилкени 100px өлчөмүндө,
дагы 3 тилкени 200px өлчөмүндө,
андан кийин бир тилкени 1fr өлчөмүндө,
жана андан кийин 2 тилкени
10% өлчөмүндө жасагыла.
