ग्रिड संपत्ति क्या है?

ग्रिड संपत्ति ग्रिड-टेम्पलेट-पंक्तियों, ग्रिड-टेम्पलेट-स्तंभों, ग्रिड-टेम्पलेट-क्षेत्रों, ग्रिड-ऑटो-पंक्तियों, ग्रिड-ऑटो-कॉलम, ग्रिड-ऑटो-प्रवाह, ग्रिड-स्तंभ-अंतराल के लिए एक आशुलिपि संपत्ति है , और ग्रिड पंक्ति-अंतराल गुण।

ग्रिड संरचना

ग्रिड संपत्ति मैट्रिक्स ⊞ की तरह प्रदर्शित करने के लिए तत्व बनाती है

 
 
 
 
 
 
 
 

सीएसएस में

# संयोजक {
 प्रदर्शन: ग्रिड;
 }

A उदाहरण में, #container को ग्रिड के रूप में प्रदर्शित किया जाता है और इसके बाल तत्व को ग्रिड सेल या आइटम के रूप में प्रदर्शित किया जाएगा

ब्राउज़र संगतता

यह एक बहुत बड़ा उत्साह है कि IE, एज, फ़ायरफ़ॉक्स सीएसएस ग्रिड संपत्ति का समर्थन करता है,। ज्यादातर सभी ब्राउज़र में डेवलपर टूल में सुंदर ग्रिड व्यू यूआई है।

ग्रिड लाइन्स

ग्रिड लाइनें क्षैतिज और ऊर्ध्वाधर रेखाएं हैं, उनका उपयोग स्थिति के लिए किया जाता है। पोजिशनिंग इंडेक्स एक पूर्णांक (नकारात्मक और सकारात्मक दोनों पूर्णांक) हो सकता है।

गुण → ग्रिड-स्तंभ-प्रारंभ, ग्रिड-स्तंभ-अंत, ग्रिड-पंक्ति-अंत, ग्रिड-पंक्ति-अंत।

नमूना कोड :

#grid> div: nth-child (2) {
 ग्रिड-कॉलम-स्टार्ट: 2;
 ग्रिड-कॉलम-एंड: 3;
 ग्रिड-पंक्ति-प्रारंभ: 2;
 ग्रिड-पंक्ति-अंत: 3;
}

तत्व 2 दूसरी क्षैतिज रेखा में 2 क्षैतिज रेखा पर शुरू होगा और तत्व 3 ऊर्ध्वाधर रेखा और 3 ऊर्ध्वाधर रेखा पर समाप्त होगा।

ग्रिड लाइन

ग्रिड सेल

एक ग्रिड सेल दो आसन्न ऊर्ध्वाधर ग्रिड लाइनों और दो आसन्न क्षैतिज ग्रिड लाइनों के बीच एक स्थान है।

ग्रिड सेल

ग्रिड ट्रैक

ग्रिड ट्रैक दो आसन्न ग्रिड लाइनों के बीच का स्थान है। यानी पंक्ति, कॉलम।

ग्रिड ट्रैक

ग्रिड क्षेत्र और ग्रिड गैप

एक ग्रिड क्षेत्र एक या अधिक कोशिकाओं का समूह है।

ग्रिड गैप पंक्तियों और स्तंभों के बीच का स्थान है। इसकी ग्रिड-पंक्ति-अंतर और ग्रिड-स्तंभ-अंतराल की शॉर्टहैंड संपत्ति है।

ग्रिड पंक्ति और ग्रिड स्तंभ

ग्रिड-पंक्ति, ग्रिड-पंक्ति-प्रारंभ और ग्रिड-पंक्ति-अंत के लिए आशुलिपि संपत्ति है।

ग्रिड-कॉलम, ग्रिड-कॉलम-स्टार्ट और ग्रिड-कॉलम-एंड के लिए शॉर्टहैंड प्रॉपर्टी है

ग्रिड की पंक्ति

ग्रिड-पंक्ति-प्रारंभ → पंक्ति में ग्रिड आइटम की प्रारंभ स्थिति निर्दिष्ट करता है

eg.grid-row-start: 2 → एलिमेंट दूसरी वर्टिकल लाइन पर शुरू होगा

ग्रिड-पंक्ति-अंत → पंक्ति में ग्रिड आइटम की अंतिम स्थिति निर्दिष्ट करता है

जैसे.ग्रिड-रो-एंड: 3 → एलिमेंट दूसरी वर्टिकल लाइन पर समाप्त होगा

ग्रिड-ऑटो प्रवाह

यह नियंत्रित करता है कि ऑटो-प्लेसमेंट एल्गोरिदम कैसे काम करता है। डिफ़ॉल्ट रूप से, मूल्य पंक्ति है (आइटम पंक्ति आधार में रखे जाते हैं)

ग्रिड ऑटो प्रवाह: पंक्ति;
ग्रिड ऑटो प्रवाह: स्तंभ;
ग्रिड ऑटो प्रवाह स्तंभ और ग्रिड ऑटो प्रवाह पंक्ति

ग्रिड-ऑटो-प्रवाह: पंक्ति सघन → उपयोग "घने" पैकिंग एल्गोरिथ्म। पंक्ति के आधार पर ग्रिड में खाली स्थान भरें।

ग्रिड-ऑटो-फ्लो: कॉलम घना → उपयोग "घने" पैकिंग एल्गोरिदम। कॉलम के आधार पर ग्रिड में मुक्त स्थान भरें

स्पष्ट ग्रिड और निहित ग्रिड

स्पष्ट ग्रिड ग्रिड-टेम्पलेट-पंक्ति, ग्रिड-टेम्पलेट-कॉलम का उपयोग करके उपयोगकर्ता द्वारा निर्मित ग्रिड हैं

ग्रिड-टेम्प्लेट-कॉलम: रिपीट (3, 100px);
ग्रिड-टेम्पलेट-पंक्तियाँ: 100px 100px;

ब्राउज़र द्वारा अंतर्निहित ग्रिड बनाया जाता है। अंतर्निहित ग्रिड का आकार ग्रिड-ऑटो-कॉलम और ग्रिड-ऑटो-पंक्तियों की संपत्ति का उपयोग करके संशोधित किया जा सकता है।

ग्रिड-टेम्प्लेट-कॉलम: रिपीट (3, 100px);
ग्रिड-ऑटो-पंक्तियाँ: 100px;

ग्रिड आदेश:

हम तत्व को टेम्पलेट एरिया प्रॉपर्टी द्वारा ऑर्डर कर सकते हैं।

हम मीडिया क्वेरी में टेम्पलेट क्षेत्र बदल सकते हैं और नई ग्रिड संरचना प्रदर्शित कर सकते हैं।

अधिक के लिए कोडपेन की जाँच करें।

ग्रिड के लिए, ज्यादातर हम सभी बूटस्ट्रैप ग्रिड सिस्टम का उपयोग करते हैं। बूटस्ट्रैप हर संस्करण में कुछ वर्ग नाम बदल सकता है (लेकिन नॉट लाइक एंगुलर some), इसलिए हमें यह याद रखने की आवश्यकता है कि किस संस्करण का कौन सा वर्ग नाम है some।

सीएसएस ग्रिड संपत्ति का उपयोग करके, हम (यहां तक ​​कि IE में) आसानी से ग्रिड दृश्य में तत्वों को प्रदर्शित कर सकते हैं।

पढ़ने के लिए बहुत बहुत धन्यवाद! अगर आपको यह पसंद आया, तो कृपया liked ताली बजाकर और पोस्ट साझा करके समर्थन करें। नीचे एक टिप्पणी छोड़ने के लिए स्वतंत्र महसूस करें।