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);
}
პრაქტიკული ამოცანები
შექმენით 4 ერთნაირი
ზომის სვეტი repeat-ის გამოყენებით.
შექმენით 4 სვეტი 100px ზომის,
და კიდევ 3 სვეტი 2fr ზომის.
შექმენით 2 სვეტი 100px ზომის,
კიდევ 3 სვეტი 200px ზომის,
შემდეგ სვეტი 1fr ზომის,
და შემდეგ 2 სვეტი
10% ზომის.
