CSS Griddagi repeat funksiyasi
Agar sizda bir xil o‘lcham beriladigan bir nechta ustun bo‘lsa,
repeat funksiyasidan foydalanib
yozuvni soddalashtirishingiz mumkin.
Ushbu funksiyaning birinchi parametrida ustunlar soni,
ikkinchisida esa ularning kengligi ko‘rsatiladi.
Keling, bu qanday ishlashini misollar orqali ko‘rib chiqaylik.
Misol
Faraz qilaylik, bizda bir xil o‘lchamdagi uchta ustun bor:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
repeat yordamida yozuvni soddalashtiramiz:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Misol
Faraz qilaylik, bizda bir xil o‘lchamdagi uchta ustun bor, to‘rtinchisi esa boshqa o‘lchamda:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
repeat yordamida yozuvni soddalashtiramiz:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Misol
Faraz qilaylik, bizda dastlabki uchta ustun bir xil o‘lchamda, keyingi uchta ustun esa boshqa o‘lchamda:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
repeat yordamida yozuvni soddalashtiramiz:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Misol
Faraz qilaylik, bizda dastlabki uchta ustun bir xil o‘lchamda, keyin yana bir ustun, va yana uchta ustun boshqa o‘lchamda:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
repeat yordamida yozuvni soddalashtiramiz:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Misol
Soddalashtirish har qanday o‘lchov birliklari uchun ishlaydi. Misol uchun, faraz qilaylik bizda piksellarda uchta ustun bor:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
repeat yordamida yozuvni soddalashtiramiz:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Amaliy vazifalar
repeat yordamida bir xil o‘lchamdagi
4 ta ustun yarating.
4 ta ustunni 100px o‘lchamda,
yana 3 ta ustunni 2fr o‘lchamda yarating.
2 ta ustunni 100px o‘lchamda,
yana 3 ta ustunni 200px o‘lchamda,
keyin 1fr o‘lchamdagi ustunni,
va keyin 2 ta ustunni
10% o‘lchamda yarating.
