CSS гридларидаги 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);
}
Мисол
Соддалаштириш барча ўлчам бирликлари учун ишлайди. Мисол учun, бизда пикселлардаги учта устун бор деб фараз қилайлик:
#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% ўлчамдаги устун яратинг.
