Grid.css - वेब डेवलपर्स के लिए एक न्यूनतम ग्रिड प्रणाली

बूटस्ट्रैप जैसे बड़े फ्रंटेंड फ्रेमवर्क उनके साथ आते हैं खुद ग्रिड सेटअप. लेकिन, वे भी ढेर सारा सामान लेकर आओ पूर्व-डिज़ाइन किए गए पृष्ठ तत्वों और जावास्क्रिप्ट घटकों के रूप में.

यदि आप एक बहुत छोटी और सुव्यवस्थित ग्रिड प्रणाली की तलाश कर रहे हैं तो आपको अच्छा लगेगा Grid.css.

यह मुफ्त खुला स्रोत पुस्तकालय पारंपरिक के साथ पैक किया गया है 12-कोल ग्रिड प्रणाली कि आप किसी भी लेआउट के लिए संरचना कर सकते हैं। सीएसएस वास्तव में उपयोग करने के लिए आसान है और फ़ाइल ही है केवल 560 बाइट्स मापता है (यह आधा KB है!)

शुरुआत करना सुपर आसान है और आपको बस जरूरत है एक सीएसएस फ़ाइल अपने शीर्ष लेख में जोड़ा गया.

आप पा सकते हैं डायरेक्ट डाउनलोड लिंक Grid.css मुखपृष्ठ पर या आधिकारिक GitHub रेपो में। आप भी उपयोग कर सकते हैं कच्चे CDN संस्करण GitHub से सीधे इस फ़ाइल को एम्बेड करने के लिए इसे बिना होस्ट किए.

अब, आप अपना कॉलम संरचना सेट कर सकते हैं आप चाहते हैं कि किसी भी तत्व का उपयोग कर (divs, वर्गों, आदि).

इसमें आम तौर पर शामिल हैं .पंक्ति तत्व (कंटेनर) बहुतों के साथ आंतरिक स्तंभ तत्व. कॉलम कक्षाएं संख्याओं का उपयोग करें उदाहरण के लिए, कंटेनर के अंदर उनके कुल स्थान को परिभाषित करने के लिए, .col4 बारह कुल के चार स्तंभ लेता है.

यहाँ ए उदाहरण स्निपेट डेमो से:

आप अपनी पसंद के कॉलम वर्गों के किसी भी संयोजन का उपयोग कर सकते हैं, बस इतने लंबे समय तक वे 12 तक जोड़ें.

इसका मतलब आप भी कर सकते हैं पृष्ठ का पुनर्गठन करें हालाँकि, आप का उपयोग करके चाहते हैं विभिन्न पंक्ति कंटेनर. उदाहरण के लिए, आप अपने शीर्ष लेख के लिए एक बड़ी अवधि रख सकते हैं, लेकिन अपने पृष्ठ निकाय के लिए दो भिन्न पंक्ति / कॉल सेटअप का उपयोग कर सकते हैं.

स्वाभाविक रूप से, यह पुस्तकालय है 100% मुफ्त तथा खुला स्त्रोत, इसलिए आप अपनी पसंद के अनुसार संपादन करने के लिए स्वतंत्र हैं.

रचनाकार, अहमद तारीक, ब्यूटेन भी बनाया जो कि कई बटन यूआई किट का एक प्रकार है। यह Grid.css के साथ अच्छी तरह से जोड़े, इसलिए वे दोनों शानदार पुस्तकालय हैं जब एक नई वेब परियोजना शुरू करते हैं.