यह CSS ग्रिड का उपयोग करके लेआउट और पैटर्न के लिए स्टार्टर टेम्पलेट्स का एक संग्रह है। यहां पर विचार यह है कि तकनीक क्या करने में सक्षम है और एक प्रारंभिक बिंदु प्रदान करें जो अन्य परियोजनाओं के लिए पुन: purposed किया जा सकता है।
याद रखें कि ग्रिड के लिए ब्राउज़र समर्थन अच्छा है, लेकिन विरासत ब्राउज़रों के लिए कमियां चाहिए। इसका मतलब है कि इनमें से कुछ उपयोग के मामलों के लिए एक सीधी कॉपी और पेस्ट अच्छी तरह से अनुकूल नहीं हो सकता है।
पवित्र कंघी बनानेवाले की रेती लेआउटऑल्ट क्लासिक तीन-कॉलम लेआउट जहां दो साइडबार और बॉडी कॉपी रखने वाले कंटेनर को पूर्ण-चौड़ाई वाले हेडर और फुटर के बीच सैंडविच किया जाता है।
लचीला पवित्र कंघी बनानेवाले की रेतीतरल पदार्थ सामग्री कंटेनर का उपयोग करके व्यूपोर्ट की चौड़ाई में बदलाव के कारण सब कुछ बरकरार है।
पेन सीएसएस ग्रिड देखें - कोडऑन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पवित्र कंघी बनानेवाले की रेती 2।
उत्तरदायी पवित्र कंघी बनानेवाले की रेतीव्यूपोर्ट संकीर्ण होते ही चीजें ढेर हो जाती हैं।
पेन सीएसएस ग्रिड देखें: होली ग्रेल लेआउट - कोडऑन पर जिओफ ग्राहम (@geoffgraham) द्वारा उत्तरदायी।
2-हेडर और फुटर के साथ कॉलमएक क्लासिक ब्लॉग लेआउट जहां एक कॉलम पोस्ट के लिए है और दूसरा साइडबार के लिए है।
लचीला 2-कॉलमजब व्यूपोर्ट संकीर्ण हो जाता है तो लेआउट स्क्विशी हो जाता है लेकिन लेआउट जगह पर रहता है।
पेन सीएसएस ग्रिड देखें: कोडपेन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा हेडर, 2-कॉलम (लचीले) के साथ पाद।
उत्तरदायी 2-कॉलमछोटी स्क्रीन पर चीजें खड़ी हो जाती हैं।
पेन सीएसएस ग्रिड देखें: हैडर, पाद लेख कोडन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा 2-कॉलम (उत्तरदायी) के साथ।
समान रूप से वितरित, फिट आवश्यकतानुसारतत्व लेआउट में बहते हैं और अधिक नहीं होने पर समाप्त होते हैं।
समान रूप से वितरित पेन सीएसएस ग्रिड देखें, कोडऑन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा आवश्यक के रूप में कई।
ब्रेकआउट के साथ अनुच्छेदटायलर स्टिक द्वारा एक महान छोटी चाल जो एक तत्व को ग्रिड से बाहर निकलने की अनुमति देती है। राहेल एंड्रयू इस बारे में गहन व्याख्या प्रदान करता है कि नामांकित ग्रिड लाइनें इसे कैसे काम करने देती हैं।
पेन सीएसएस ग्रिड देखें: कोडपेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा ब्रेकआउट के साथ अनुच्छेद।
मूल कैलेंडरजैसा कि आप उम्मीद कर सकते हैं, सीएसएस ग्रिड एक कैलेंडर ग्रिड के लिए अच्छी तरह से काम करता है।
पेन सीएसएस ग्रिड देखें: CodePen पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा कैलेंडर।
एकाधिकार मंडलखेल बोर्ड का एक सरल मनोरंजन। जेन सिमंस के पास मोनपोली शैलियों के साथ एक मिठाई डेमो है।
पेन सीएसएस ग्रिड देखें: CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा एकाधिकार बोर्ड।
हमारे लर्निंग पार्टनर
फ्रंटेंड मास्टर्स
फ्रंट-एंड डेवलपमेंट ट्रेनिंग की जरूरत है?
फ्रंटेंड मास्टर्स इसे पाने के लिए सबसे अच्छी जगह है। उनके पास रिएक्ट से लेकर सीएसएस, वीयू से लेकर डी 3 तक, और नोड.जेएस और फुल स्टैक के अलावा सभी सबसे महत्वपूर्ण फ्रंट-एंड टेक्नोलॉजी पर पाठ्यक्रम हैं।