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:

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

repeat yordamida yozuvni soddalashtiramiz:

css#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:

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

repeat yordamida yozuvni soddalashtiramiz:

css#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:

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

repeat yordamida yozuvni soddalashtiramiz:

css#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:

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

repeat yordamida yozuvni soddalashtiramiz:

css#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:

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

repeat yordamida yozuvni soddalashtiramiz:

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

Amaliy vazifalar