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);
}

व्यावहारिक कार्य