CSS գրիդներում repeat ֆունկցիան

Եթե դուք ունեք մի քանի սյուներ, որոնց համար նշված են նույն չափերը, ապա կարող եք պարզեցնել գրառումը՝ օգտագործելով repeat ֆունկցիան։ Այս ֆունկցիայի առաջին պարամետրում նշվում է սյուների քանակը, իսկ երկրորդում՝ դրանց լայնությունը։ Եկեք օրինակներով տեսնենք, թե ինչպես է այն աշխատում։

Օրինակ

Ենթադրենք, մենք ունենք նույն չափի երեք սյունակ.

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Պարզեցնենք գրառումը օգտագործելով repeat.

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Օրինակ

Ենթադրենք, մենք ունենք նույն չափի երեք սյունակ, իսկ չորրորդը՝ այլ չափի.

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Պարզեցնենք գրառումը օգտագործելով repeat.

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Օրինակ

Ենթադրենք, առաջին երեք սյունակները մեկ չափի են, իսկ երկրորդ երեք սյունակները՝ այլ չափի.

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Պարզեցնենք գրառումը օգտագործելով repeat.

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Օրինակ

Ենթադրենք, մենք ունենք առաջին երեք սյունակները մեկ չափի, ապա ևս մեկ սյունակ, և ապա ևս երեք սյունակ՝ այլ չափի.

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Պարզեցնենք գրառումը օգտագործելով repeat.

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Օրինակ

Պարզեցումը աշխատում է ցանկացած միավորի չափերի համար։ Որպես օրինակ, ենթադրենք մենք ունենք երեք սյունակ պիքսելներով.

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Պարզեցնենք գրառումը օգտագործելով repeat.

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Գործնական առաջադրանքներ