मल्टी-कॉलम वेबसाइट लेआउट के लिए CSS कॉलम का उपयोग कैसे करें

कई वर्षों के लिए, सीएसएस तैरता है वेबसाइट लेआउट बनाने में एक बारीक, फिर भी आवश्यक, घटक रहा है। यदि आपका डिज़ाइन कई स्तंभों के लिए कहता है, तो आप फ़्लोट में बदल गए। इस पद्धति के साथ समस्या यह है कि, वेब डिजाइनरों/डेवलपर्स ने जटिल साइट बनाने में जो अविश्वसनीय सरलता दिखाई है, उसके बावजूद despite लेआउट, CSS फ़्लोट्स वास्तव में इस तरह से उपयोग किए जाने के लिए कभी नहीं थे।

जबकि फ्लोट्स और सीएसएस पोजीशनिंग का वेब डिज़ाइन में आने वाले कई वर्षों के लिए स्थान निश्चित है, नया लेआउट सीएसएस ग्रिड और फ्लेक्सबॉक्स सहित तकनीकें अब वेब डिजाइनरों को अपनी साइट लेआउट बनाने के नए तरीके दे रही हैं। एक और नई लेआउट तकनीक जो बहुत अधिक संभावनाएं दिखाती है, वह है CSS मल्टीपल कॉलम।

CSS Columns को अब लगभग कुछ साल हो गए हैं, लेकिन पुराने ब्राउज़रों में समर्थन की कमी (मुख्य रूप से पुराने .) Internet Explorer के संस्करण) ने कई वेब पेशेवरों को अपने उत्पादन में इन शैलियों का उपयोग करने से रोक रखा है काम क।

IE के उन पुराने संस्करणों के लिए समर्थन की समाप्ति के साथ, कुछ वेब डिज़ाइनर अब नए CSS लेआउट के साथ प्रयोग कर रहे हैं विकल्प, सीएसएस कॉलम शामिल हैं, और यह पता लगाना कि इन नए दृष्टिकोणों के साथ उनका इतना अधिक नियंत्रण है जितना उन्होंने किया था तैरता है।

सीएसएस कॉलम की मूल बातें

जैसा कि इसके नाम से पता चलता है, CSS मल्टीपल कॉलम्स (जिसे के रूप में भी जाना जाता है) CSS3 बहु-स्तंभ लेआउट) आपको सामग्री को स्तंभों की एक निर्धारित संख्या में विभाजित करने की अनुमति देता है। आपके द्वारा उपयोग की जाने वाली सबसे बुनियादी CSS गुण हैं:

• स्तंभ-गणना
• कॉलम-गैप

कॉलम-काउंट के लिए, आप अपने इच्छित कॉलम की संख्या निर्दिष्ट करते हैं। कॉलम गैप उन स्तंभों के बीच गटर या रिक्ति होगी। ब्राउज़र इन मानों को लेगा और सामग्री को आपके द्वारा निर्दिष्ट स्तंभों की संख्या में समान रूप से विभाजित करेगा।

व्यवहार में सीएसएस एकाधिक स्तंभों का एक सामान्य उदाहरण पाठ सामग्री के एक ब्लॉक को कई स्तंभों में विभाजित करना होगा, जैसा कि आप एक अखबार के लेख में देखेंगे। मान लें कि आपके पास निम्न HTML मार्कअप है (ध्यान दें कि उदाहरण के लिए, हमने केवल शुरुआत की है एक पैराग्राफ, जबकि व्यवहार में इस मार्कअप में सामग्री के कई पैराग्राफ होने की संभावना होगी):

आपके लेख का शीर्षक।

यहाँ पाठ के बहुत सारे अनुच्छेदों की कल्पना करें...

यदि आपने इन सीएसएस शैलियों को लिखा है:

।सामग्री {
-मोज़-कॉलम-गिनती: 3;
-वेबकिट-कॉलम-गिनती: 3;
कॉलम-गिनती: 3;
-मोज़-कॉलम-गैप: 30px;
-वेबकिट-कॉलम-गैप: 30px;
कॉलम-गैप: 30px;
}

यह सीएसएस नियम "सामग्री" विभाजन को उनके बीच 30 पिक्सेल के अंतराल के साथ 3 बराबर स्तंभों में विभाजित करेगा। यदि आप 3 के बजाय दो कॉलम चाहते हैं, तो आप बस उस मान को बदल देंगे और ब्राउज़र सामग्री को समान रूप से विभाजित करने के लिए उन कॉलम की नई चौड़ाई की गणना करेगा। ध्यान दें कि हम पहले वेंडर-प्रीफिक्स्ड प्रॉपर्टीज का उपयोग करते हैं, उसके बाद नॉन-प्रीफिक्स्ड डिक्लेरेशन।

यह जितना आसान है, इस तरह से इसका उपयोग वेबसाइट के उपयोग के लिए संदिग्ध है। हां, आप सामग्री के एक समूह को कई स्तंभों में विभाजित कर सकते हैं, लेकिन यह सबसे अच्छा पठन नहीं हो सकता है वेब के लिए अनुभव, खासकर यदि इन स्तंभों की ऊंचाई "गुना" से नीचे आती है स्क्रीन।

फिर पूरी सामग्री को पढ़ने के लिए पाठकों को ऊपर और नीचे स्क्रॉल करना होगा। फिर भी, सीएसएस कॉलम का प्रिंसिपल उतना ही आसान है जितना आप यहां देखते हैं, और इसका उपयोग कुछ पैराग्राफ की सामग्री को विभाजित करने के अलावा और भी बहुत कुछ करने के लिए किया जा सकता है-यह वास्तव में लेआउट के लिए उपयोग किया जा सकता है।

सीएसएस कॉलम के साथ लेआउट

मान लें कि आपके पास सामग्री क्षेत्र वाला एक वेबपृष्ठ है जिसमें सामग्री के 3 कॉलम हैं। यह एक बहुत ही सामान्य वेबसाइट लेआउट है, और उन 3 कॉलमों को प्राप्त करने के लिए, आप सामान्य रूप से उन डिवीजनों को फ़्लोट करेंगे जो अंदर हैं। CSS मल्टीपल-कॉलम के साथ, यह बहुत आसान है।

यहां कुछ नमूना एचटीएमएल है:

हमारे ब्लॉग से।

सामग्री यहां जाएगी …

आगामी कार्यक्रम।

सामग्री यहां जाएगी …

इन एकाधिक स्तंभों को बनाने के लिए CSS जो आपने पहले देखा था उससे शुरू होता है:

।सामग्री {
-मोज़-कॉलम-गिनती: 3;
-वेबकिट-कॉलम-गिनती: 3;
कॉलम-गिनती: 3;
-मोज़-कॉलम-गैप: 30px;
-वेबकिट-कॉलम-गैप: 30px;
कॉलम-गैप: 30px;
}

अब, यहां चुनौती यह है कि ब्राउज़र इस सामग्री को समान रूप से विभाजित करना चाहता है, इसलिए यदि इन डिवीजनों की सामग्री की लंबाई अलग है, तो वह ब्राउज़र वास्तव में एक की सामग्री को विभाजित करेगा अलग-अलग विभाजन, इसकी शुरुआत को एक कॉलम में जोड़ना और फिर दूसरे में जारी रखना (आप एक प्रयोग चलाने के लिए इस कोड का उपयोग करके इसे देख सकते हैं और प्रत्येक के अंदर अलग-अलग लंबाई की सामग्री जोड़ सकते हैं) विभाजन)।

वह नहीं है जो आप चाहते हैं। आप चाहते हैं कि इनमें से प्रत्येक डिवीजन एक अलग कॉलम बनाए और, कोई फर्क नहीं पड़ता कि एक व्यक्तिगत डिवीजन की सामग्री कितनी बड़ी या छोटी हो सकती है, आप इसे कभी भी विभाजित नहीं करना चाहते हैं। आप इसे CSS की एक अतिरिक्त पंक्ति जोड़कर प्राप्त कर सकते हैं:

सामग्री div {
प्रदर्शन: इनलाइन-ब्लॉक;
}

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

कॉलम-चौड़ाई का उपयोग करना

"कॉलम-काउंट" के अलावा एक और संपत्ति है जिसका आप उपयोग कर सकते हैं, और आपकी लेआउट आवश्यकताओं के आधार पर, यह वास्तव में आपकी साइट के लिए एक बेहतर विकल्प हो सकता है। यह "कॉलम-चौड़ाई" है। जैसा कि पहले दिखाया गया था, उसी HTML मार्कअप का उपयोग करके, हम इसके बजाय अपने CSS के साथ ऐसा कर सकते हैं:

।सामग्री {
-मोज़-कॉलम-चौड़ाई: 500px;
-वेबकिट-कॉलम-चौड़ाई: 500px;
स्तंभ-चौड़ाई: 500px;
-मोज़-कॉलम-गैप: 30px;
-वेबकिट-कॉलम-गैप: 30px;
कॉलम-गैप: 30px;
}
सामग्री div {
प्रदर्शन: इनलाइन-ब्लॉक;
}

जिस तरह से यह काम करता है वह यह है कि ब्राउज़र इस "कॉलम-चौड़ाई" का उपयोग उस कॉलम के अधिकतम मान के रूप में करता है। इसलिए यदि ब्राउज़र विंडो 500 पिक्सेल से कम चौड़ी है, तो ये 3 डिवीजन एक कॉलम में दिखाई देंगे, एक दूसरे के शीर्ष पर। यह मोबाइल/छोटे स्क्रीन लेआउट के लिए उपयोग किया जाने वाला एक सामान्य लेआउट है।

जैसे ही ब्राउज़र की चौड़ाई निर्दिष्ट कॉलम अंतराल के साथ 2 कॉलम फिट करने के लिए काफी बड़ी हो जाती है, ब्राउज़र स्वचालित रूप से एक कॉलम लेआउट से दो कॉलम में चला जाएगा। स्क्रीन की चौड़ाई बढ़ाते रहें और अंत में, आपको 3 कॉलम का डिज़ाइन मिलेगा, जिसमें हमारे प्रत्येक 3 डिवीजन अपने कॉलम में प्रदर्शित होंगे। फिर से, यह कुछ प्रतिक्रियाशील पाने का एक शानदार तरीका है, मल्टी-डिवाइस फ्रेंडली लेआउट, और आपको उपयोग करने की भी आवश्यकता नहीं है मीडिया के प्रश्नों लेआउट शैलियों को बदलने के लिए!

अन्य कॉलम गुण

यहां कवर किए गए गुणों के अलावा, "कॉलम-नियम" के लिए भी गुण हैं, जिसमें रंग, शैली और चौड़ाई मान शामिल हैं जो आपको अपने कॉलम के बीच नियम बनाने की अनुमति देते हैं। यदि आप कुछ पंक्तियों को अपने स्तंभों को अलग करना चाहते हैं तो इनका उपयोग सीमाओं के बजाय किया जाएगा।

प्रयोग करने का समय

वर्तमान में, CSS मल्टीपल कॉलम लेआउट बहुत अच्छी तरह से समर्थित है। उपसर्गों के साथ, 94% से अधिक वेब उपयोगकर्ता इन शैलियों को देख पाएंगे, और वह असमर्थित समूह वास्तव में इंटरनेट एक्सप्लोरर के बहुत पुराने संस्करण होंगे जो अब किसी भी तरह समर्थित नहीं हैं।

इस स्तर के समर्थन के साथ, सीएसएस कॉलम के साथ प्रयोग शुरू नहीं करने और उत्पादन-तैयार वेबसाइटों में इन शैलियों को तैनात करने का कोई कारण नहीं है। आप इस लेख में प्रस्तुत HTML और CSS का उपयोग करके अपने प्रयोग शुरू कर सकते हैं और विभिन्न मूल्यों के साथ खेल सकते हैं यह देखने के लिए कि आपकी साइट की लेआउट आवश्यकताओं के लिए सबसे अच्छा क्या काम करेगा।