Gridlex CSS ग्रिड सिस्टम के साथ आसानी से आधुनिक लेआउट बनाएँ
सीमावर्ती विकास की शुरुआत के साथ मौलिक रूप से सुधार हुआ है सीएसएस फ्लेक्सबॉक्स. इससे यह बहुत आसान हो जाता है ग्रिड और कॉलम बनाएं कि स्वाभाविक रूप से उत्तरदायी लेआउट के लिए बदलाव.
खरोंच से अपने स्वयं के फ्लेक्सबॉक्स ग्रिड को कोड करने के बजाय, जैसे उपकरण का उपयोग करना कहीं अधिक आसान है Gridlex. यह फ्री ओपन सोर्स फ्लेक्सबॉक्स लाइब्रेरी है सुपर हल्के और बहुत अनुकूलित करने के लिए आसान है.
तुम सब करते हो ग्रिडलेक्स स्टाइलशीट जोड़ें अपने वेबपेज पर और इसकी ग्रिड कक्षाओं के साथ काम करें. आंतरिक कॉलम एक कक्षा लेते हैं .col और आप इन सभी को एक के अंदर लपेटते हैं .ग्रिड कंटेनर। यह हर कॉलम को परिभाषित करता है एक ही चौड़ाई पर और एक समान इंटरफ़ेस बनाता है.
यह डिफ़ॉल्ट है ओवरराइड किया जा सकता है जोड़ कर आकार देने वाली कक्षाएं प्रत्येक स्तंभ के लिए। इस तरह आपके पास 70% चौड़ाई पर एक कॉलम और 30% चौड़ाई पर एक और कॉलम हो सकता है (जैसे सामग्री / साइडबार).
आप टन मिल जाएगा ग्रिड के नमूने के साथ ग्रिडलेक्स होम पेज पर लाइव डेमो तथा कोड के टुकड़े अपनी साइट में कॉपी / पेस्ट करने के लिए। यह बहुत सारे के साथ एक विशाल पुस्तकालय है वैकल्पिक कक्षाएं किसी भी वेबसाइट के लिए सबसे सरल ग्रिड बनाने में आपकी मदद करने के लिए.
सभी ग्रिड एक में जोड़ते हैं कुल 12 मिनी कॉलम, इसलिए आप परिभाषित कर सकते हैं कि प्रत्येक कॉलम को कितना स्थान लेना चाहिए। यह भ्रामक लग सकता है लेकिन जब आप दृश्य डेमो देखते हैं तो यह समझ में आता है.
यहाँ एक है कोड उदाहरण अलग-अलग चौड़ाई वाले बड़े ग्रिड के लिए उपयोग किया जाता है:
.........
ध्यान दें कि .ग्रिड कक्षा में सब कुछ होता है और कॉलम प्रयास करता है 12 भागों में विभाजित (उदाहरण में यह प्रत्येक के लिए would चौड़ाई होगी)। हालाँकि, निश्चित कॉलम स्पैन 2 और 6 कोल क्रमशः, इतना पहला स्तंभ एक स्वचालित चौड़ाई का उपयोग करता है जो कुछ बचा है उसके आधार पर.
अन्य दो कॉलमों का उपयोग करके, हम यह अनुमान लगा सकते हैं कि 4 कॉलम (12-6-2) बचे होंगे कुल 12 मारा. यह सब बहुत सरल गणित है लेकिन वर्ग के नाम भ्रामक हो सकते हैं। एक बार जब आप एक परियोजना पर ग्रिडलेक्स के साथ खेलना शुरू करते हैं, तो आप नामकरण प्रणाली को जल्दी से उठा लेंगे.
Gridlex वर्तमान में है संस्करण में 2.x और उसका लगातार अपडेट किया जा रहा है गिटहब पर। जैसे ही ब्राउज़र समर्थन बढ़ता है, मैं फ्लेक्सबॉक्स पर अधिक ध्यान देना चाहता हूं, और अधिक साइटें इस मॉडल को पेज ग्रिड के लिए अपना रही हैं.
तुम भी एक पा सकते हैं पूर्ण गैलरी वेबसाइटों को देखने के लिए जब यह लाइव वेबसाइटों पर लागू होता है तो यह कैसे दिखता है.
यदि आपने पहले कभी फ्लेक्सबॉक्स का उपयोग नहीं किया है, तो ग्रिडलेक्स के साथ खेलने के लिए एक मजेदार पुस्तकालय हो सकता है। लेकिन मैं आपके ज्ञान का परीक्षण करने और बुनियादी बातों को समझने में आपकी मदद करने के लिए मजेदार फ्लेक्सबॉक्स गेम का उपयोग करने का अभ्यास करने की सलाह देता हूं.
ग्रिडलेक्स है मुफ्त में उपलब्ध है GitHub रेपो में या आप इसे npm या bower के माध्यम से खींच सकते हैं। यह ऑफर पूर्ण प्रलेखन मुख्य साइट पर, जिसमें अलग-अलग चौड़ाई के कॉलम और मीडिया क्वेरी के लिए डेमो शामिल हैं.
आपके पास पूर्ण नियंत्रण flexbox डिजाइन पर और यह केवल कुछ सीएसएस कक्षाएं लेता है इसे बनाने के लिए! और यदि आपके पास कभी भी कोई त्वरित प्रश्न हो या आप किसी साइट का निर्माण करना चाहते हों, जिसका निर्माण आपने Gridlex का उपयोग करके किया हो, तो आप Twitter @webdevlint पर निर्माता को संदेश दे सकते हैं.
