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);
}
Օրինակ
Պարզեցումը աշխատում է ցանկացած միավորի չափերի համար։ Որպես օրինակ, ենթադրենք մենք ունենք երեք սյունակ պիքսելներով.
#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% չափով։
