CSS repeat() फ़ंक्शन

रोकथाम और इस्तेमाल

CSS repeat() फ़ंक्शन का इस्तेमाल ग्रिड में एक समूह स्तम्भ या पट्टी को दुहराने के लिए किया जाता है。

अगर आपके ग्रिड में बहुत से स्तम्भ या पट्टी हैं, तो यह फ़ंक्शन बहुत उपयोगी है।इस फ़ंक्शन के द्वारा, आप एक 'दुहराए गए रूप' बना सकते हैं जिसे इस्तेमाल कर सकते हैं。

इस फ़ंक्शन के साथ grid-template-columns गुण और grid-template-rows गुणों को साथ मिलाकर इस्तेमाल करें。

उदाहरण

उदाहरण 1

इस्तेमाल repeat() ग्रिड में एक समूह स्तम्भ को दुहराएं:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

अपने आप प्रयोग करें

उदाहरण 2

इस्तेमाल repeat() ग्रिड में एक समूह स्तम्भ को दुहराएं:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

अपने आप प्रयोग करें

CSS व्याकरण

repeat(repeat-count, tracks)
मान वर्णन
repeat-counts

आवश्यक।स्तम्भ या पट्टी को दुहराने की बारंबारता निर्दिष्ट करें。

यह 1 या बड़े अंक हो सकता है या अद्वितीय शब्द auto-fill या auto-fit (वे कीचिड़ी को भरने के लिए स्तम्भ/पट्टी को दुहराते हैं)।

tracks

आवश्यक।कोई पूर्णतः दुहराए गए स्तम्भ या पट्टी सेट निर्दिष्ट करें।इसके लिए निम्नलिखित मान हो सकते हैं:

  • लंबाई मान (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • नामक रेखा

तकनीकी विवरण

संस्करण: CSS Grid Layout Module Level 2

ब्राउज़र समर्थन

तालिका में वाले नंबर पहली बार इस फ़ंक्शन को समर्थन करने वाले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

क्रोम एज फायरफॉक्स सफारी ओपेरा
57 16 76 10.1 44

संबंधित पृष्ठ

संदर्भ:CSS grid-template-columns विशेषता

संदर्भ:CSS grid-template-rows विशेषता