मल्टीकॉम्पलियंस (सीएसएस कॉलम) का उपयोग कहां और कैसे करें

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

---

बहुरंगी क्या हैं?

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

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

नीचे दिए गए उदाहरण में, मैं column-width का उपयोग कॉलम को कम से कम 14em चौड़ा करने के लिए करता हूं। सीएसएस कॉलम यह निर्धारित करता है कि 14em की चौड़ाई वाले कितने कॉलम कंटेनर में फिट होंगे, और फिर उनके बीच शेष स्थान आवंटित करता है। कॉलम में कम से कम 14em की चौड़ाई होगी, सिवाय ऐसी स्थिति के जिसमें केवल एक कॉलम रखा गया हो, जिस स्थिति में यह संकरा हो सकता है। सीएसएस कॉलम पहली बार था जब हमने सीएसएस में समान व्यवहार का सामना किया था, जो कॉलम डिफ़ॉल्ट रूप से उत्तरदायी थे। मीडिया के भावों को जोड़ने और विभिन्न नियंत्रण बिंदुओं पर कॉलम की संख्या को बदलने की आवश्यकता नहीं है, इसके बजाय हम इष्टतम चौड़ाई निर्दिष्ट करते हैं और ब्राउज़र इसके साथ काम करेगा।

स्तंभ शैली

CSS कॉलम के गुणों का उपयोग करके बनाए गए स्तंभ ब्लॉक को स्टाइल के लिए नहीं चुना जा सकता है। आप उन्हें जावास्क्रिप्ट का उपयोग करके नहीं चुन सकते हैं या इसे एक पृष्ठभूमि रंग देने या पैडिंग या मार्जिन को अनुकूलित करने के लिए एकल ब्लॉक को स्टाइल कर सकते हैं। सभी स्पीकर ब्लॉक एक ही आकार के होंगे। केवल एक चीज जो आप कर सकते हैं वह column-rule संपत्ति का उपयोग करते हुए स्तंभों के बीच एक विभाजन रेखा जोड़ सकती है, जो सीमा की तरह काम करती है। आप column-gap प्रॉपर्टी का उपयोग करने वाले column-gap बीच भी इंडेंट कर सकते हैं, जिसकी डिफ़ॉल्ट वैल्यू 1em है, हालांकि आप इसे किसी अन्य वैध यूनिट में बदल सकते हैं


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

वेब में कॉलम लेआउट का उपयोग करते समय सीएसएस कॉलम की कार्यक्षमता और कुछ संभावित समस्याओं पर विचार किया जाना चाहिए।

अध्यक्ष कवरेज

कभी-कभी आपको कुछ सामग्री को स्तंभों में तोड़ने की आवश्यकता हो सकती है, लेकिन फिर स्तंभों के ब्लॉक को कवर करते हुए एक तत्व भर में रखें। यह column-span कंटेनर के वंशज के लिए कॉलम column-span प्रॉपर्टी को लागू करके प्राप्त किया जा सकता है।

नीचे दिए गए उदाहरण में, मैंने स्तंभों को <blockquote> तत्व बनाया। ध्यान दें जब आप ऐसा करते हैं, तो सामग्री इस तत्व के ऊपर फ़ील्ड के एक सेट में विभाजित हो जाती है, फिर इसके नीचे कॉलम का एक नया सेट शुरू होता है। सामग्री एनक्लोजिंग तत्व के ऊपर नहीं कूदती है।

वर्तमान में, column-span प्रॉपर्टी फ़ायरफ़ॉक्स को छोड़कर सभी ब्राउज़रों में डिफ़ॉल्ट रूप से काम करती है। इसमें, यह अभी भी विकसित किया जा रहा है और ध्वज के पीछे छिपा हुआ है।


ध्यान रखें कि मौजूदा विनिर्देश में, column-span प्रॉपर्टी का मूल्य केवल या केवल all हो सकता है। आप केवल कुछ स्तंभों को कवर नहीं कर सकते हैं, लेकिन कॉलम लेआउट को अन्य टाइपिंग विधियों के साथ जोड़कर आप ऐसा परिणाम प्राप्त कर सकते हैं। निम्नलिखित उदाहरण में, मेरे पास दो कॉलम के साथ ग्रिड कंटेनर है। बायाँ स्तंभ 2fr चौड़ा और दाहिना स्तंभ 1fr चौड़ा है। बाएं कॉलम में, मैंने लेख को एक कॉलम कंटेनर में दो कॉलमों के साथ लपेटा है जिसमें एक संलग्न तत्व भी है।

दाईं ओर वह सामग्री है जो दूसरे ग्रिड कॉलम में स्थित है। हमारे पास उपलब्ध विभिन्न प्रकार के लेआउट विधियों के साथ खेलते हुए, हम वास्तव में यह निर्धारित कर सकते हैं कि कौन सी एक विशेष स्थिति में सबसे उपयुक्त है - उन्हें गठबंधन करने से डरो मत।

कंटेंट ट्रांसफर कंट्रोल

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

सामग्री को स्तंभों में विभाजित करके, आप वह करते हैं जिसे विखंडन कहा जाता है। यदि आप अपनी सामग्री को पृष्ठों के बीच साझा करते हैं, तो यह सच है, उदाहरण के लिए, जब आप मुद्रण के लिए शैली बनाते हैं। नतीजतन, स्तंभ वेब पर अन्य मार्कअप विधियों की तुलना में पृष्ठांकित मीडिया के करीब हैं। इस वजह से, कई सालों तक, सामग्री में रैपर को नियंत्रित करने का तरीका page-break- गुणों का उपयोग करना था जो CSS 2.1 का हिस्सा थे।

• page-break-before
• page-break-after
• page-break-inside

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

• break-before
• break-after
• break-inside

एक उदाहरण के रूप में, मैंने bread-inside: avoid उपयोग किया bread-inside: avoid कैप्शन को छवि से अलग करने से रोकने के लिए <figure> तत्व के लिए संपत्ति bread-inside: avoid । एक ब्राउज़र जो इस संपत्ति का समर्थन करता है, उसे तत्व को बरकरार रखना चाहिए, भले ही कॉलम असमान दिखाई दें।


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

वेब पर कॉलम की समस्या

वेब पर सीएसएस कॉलम के बड़े पैमाने पर उपयोग को नहीं देखने के कारणों में से एक यह है कि यह पृष्ठ के साथ पाठक की बातचीत में बदलाव लाएगा, इसे बग़ल में स्क्रॉल करने के लिए मजबूर करेगा और ऊपर और नीचे नहीं। सहमत हूं, यह बहुत सुविधाजनक नहीं है।

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


यह समस्या वेब पर सीएसएस कॉलम का उपयोग कुछ ऐसा करती है जिसे हमें उस पर पोस्ट की गई सामग्री की मात्रा के संदर्भ में बहुत सावधानी से काम करना चाहिए।

ब्लॉक ओवरफ्लो स्पीकर

CSS कॉलम के विनिर्देशन के स्तर 2 के लिए, हम इस बात पर विचार कर रहे हैं कि उस पद्धति को कैसे सक्षम किया जाए जिसके द्वारा स्तंभों को ओवरफ्लो किया जा सके, जिससे वर्तमान में क्षैतिज स्क्रॉलिंग दिखाई दे, बजाय ब्लॉक दिशा में बढ़े।

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

यह कार्यक्षमता वेब पर कॉलम को अधिक उपयोगी बनाती है। हालाँकि हम अभी भी इससे बहुत दूर हैं, फिर भी आप CSS वर्किंग ग्रुप रिपॉजिटरी में इस मुद्दे पर अनुसरण कर सकते हैं। यदि आपके पास इस कार्यक्षमता का उपयोग करने के अतिरिक्त उदाहरण हैं, तो उनके बारे में लिखें, यह वास्तव में मदद करता है जब नई कार्यक्षमता विकसित की जा रही है।

आज बहुरंगी कैसे उपयोगी हैं?

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

छोटे इंटरफ़ेस या पाठ तत्वों को कम करें

जहाँ कहीं भी कम जगह लेनी चाहिए, उन मदों की एक छोटी सूची है, जहाँ मल्टीकॉम्बुलेन्स उपयोगी हो सकते हैं। उदाहरण के लिए, चेकबॉक्स की एक साधारण सूची या नामों की सूची। अक्सर ऐसी स्थितियों में, आगंतुक अंत तक एक कॉलम नहीं पढ़ता है, जिसके बाद वह अगले की शुरुआत तक लौटता है, लेकिन जाने के लिए लिंक या क्लिक करने के लिए चेकबॉक्स के लिए सामग्री में दिखता है। यहां तक ​​कि अगर स्क्रॉलिंग की उपस्थिति के साथ एक स्थिति उत्पन्न होती है, तो यह एक समस्या नहीं होनी चाहिए।

आप डोनारम्यूज़िक वेबसाइट पर बोलने वालों के समान उपयोग का एक उदाहरण देख सकते हैं

सामग्री की पूर्व-ज्ञात छोटी मात्रा

ऐसी स्थितियां हैं जब किसी साइट को विकसित करते समय, हम पहले से जानते हैं कि कुछ सामग्री की मात्रा अवांछित स्क्रॉलिंग के बिना अधिकांश स्क्रीन पर छोटी और फिट होगी। मैंने एक परिचय के लिए Notist पर प्रस्तुति पृष्ठों पर कॉलम का उपयोग किया।

एंडी क्लार्क ने इक्फंड के लिए एक शानदार उदाहरण तैयार किया



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

चिनाई की तरह सामग्री प्रदर्शन

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

वीरले पीटरर्स ने अपने प्रेरणादायक पृष्ठ पर इन उद्देश्यों के लिए कॉलम का उपयोग करने का एक शानदार उदाहरण दिया है।

ग्रिड और फ्लेक्सबॉक्स फालबैक

column- गुणों का उपयोग ग्रिड या फ्लेक्स लेआउट के लिए एक column- रूप में भी किया जा सकता है। यदि आप कंटेनर के लिए स्तंभ गुणों में से एक को निर्दिष्ट करते हैं, तो इस कंटेनर को एक फ्लेक्स या ग्रिड लेआउट में display: flex या display: grid का उपयोग करके चालू करें display: grid किसी भी कॉलम व्यवहार को रद्द कर दिया जाएगा। यदि आपके पास, उदाहरण के लिए, एक कार्ड लेआउट है जो सीएसएस ग्रिड का उपयोग करता है और कई कॉलम में पढ़ने योग्य है, तो आप कॉलम का उपयोग एक साधारण बैकबैक के रूप में कर सकते हैं। सीएसएस ग्रिड का समर्थन नहीं करने वाले ब्राउज़रों को एक कॉलम डिस्प्ले प्राप्त होगा, जो समर्थन करते हैं उन्हें ग्रिड प्राप्त होगा।

बहुरंगी के बारे में मत भूलना!

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

यदि आप अपनी परियोजना में कॉलम का उपयोग करते हैं, तो शायद आपको इस कार्यक्षमता का उपयोग करने के अन्य तरीकों को साझा करने के लिए टिप्पणियों में इसका उल्लेख छोड़ देना चाहिए