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

आप लचीले और गतिशील लेआउट बनाने के लिए स्तंभ गुणों का उपयोग कर सकते हैं जो विभिन्न स्क्रीन आकारों के अनुकूल होते हैं।

कॉलम संख्या, चौड़ाई और गैप निर्दिष्ट करना

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

उदाहरण के लिए:

कंटेनर {
स्तंभ-गिनती: 3;
}

आप कॉलम की चौड़ाई और अंतर भी निर्दिष्ट कर सकते हैं। आप इनमें से किसी का भी उपयोग करके कॉलम चौड़ाई मान सेट कर सकते हैं समर्थित सीएसएस इकाइयां पसंद पिक्सल, ईएम, या %.

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

instagram viewer

उदाहरण के लिए, यह सीएसएस घोषित करता है 3 कॉलम, प्रत्येक की चौड़ाई के साथ 200 पिक्सल:

कंटेनर {
स्तंभ-गिनती: 3;
स्तंभ की चौड़ाई: 200पिक्सल;
}

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

उदाहरण के लिए:

कंटेनर {
स्तंभ-गिनती: 3;
स्तंभ-अंतराल: 20पिक्सल; /* कॉलम के बीच के अंतर को 20 पिक्सेल पर सेट करता है */
}

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

श्योर कॉलम बैलेंस बनाना

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

स्तंभों को संतुलित करने के लिए, आपको यह सुनिश्चित करना चाहिए कि आपके लेआउट के प्रत्येक स्तंभ में लगभग समान मात्रा में सामग्री हो।

आप इसे CSS सेट करके प्राप्त कर सकते हैं स्तंभ-भरें संपत्ति को संतुलन. एक ब्राउज़र तब सामग्री को सभी स्तंभों में समान रूप से वितरित करने का प्रयास करेगा ताकि वे लगभग समान ऊंचाई के हों।

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

यहाँ कैसे उपयोग करने का एक उदाहरण है स्तंभ-भरें मल्टी-कॉलम लेआउट में कॉलम को संतुलित करने की संपत्ति:

.मल्टी-कॉलम-लेआउट {
स्तंभ-गिनती: 3;
स्तंभ-अंतराल: 20पिक्सल;
स्तंभ-भरें: संतुलन;
}

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

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

यह सब एक साथ डालें

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

सबसे पहले, मूल HTML संरचना बनाएँ। अपनी सामग्री को लपेटने के लिए एक कंटेनर तत्व का उपयोग करें, फिर कई बाल तत्व बनाएं जिन्हें आप कॉलम में लेआउट कर सकते हैं।

एचटीएमएल>
<एचटीएमएल>
<सिर>
<जोड़नासंबंधित="शैली पत्रक"href="सीएसएस कॉलम. सीएसएस" />
सिर>
<शरीर>
 कंटेनर तत्व 
<डिवकक्षा="पत्रिका-लेआउट">
 बाल तत्व 
<डिवकक्षा="लेख">
<एच 2>लेख का शीर्षकएच 2>


<पी>लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट। सेड इन
 मैग्ना वेल लोरेम फेरेट्रा बाइबेंडम।पी>
डिव>


<डिवकक्षा="लेख">
<एच 2>लेख का शीर्षकएच 2>


<पी>लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट। सेड इन
 मैग्ना वेल लोरेम फेरेट्रा बाइबेंडम।पी>
डिव>


<डिवकक्षा="लेख">
<एच 2>लेख का शीर्षकएच 2>


<पी>लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट। सेड इन
 मैग्ना वेल लोरेम फेरेट्रा बाइबेंडम।पी>
डिव>
डिव>
शरीर>
एचटीएमएल>

सीएसएस मल्टी-कॉलम मॉड्यूल का उपयोग करके पत्रिका-शैली का लेआउट बनाने के लिए, संयोजन करें स्तंभ-गिनती, स्तंभ की चौड़ाई, स्तंभ-अंतराल, और स्तंभ-भरें गुण:

.पत्रिका-लेआउट {
स्तंभ-गिनती: 3;
स्तंभ की चौड़ाई: 300पिक्सल;
स्तंभ-अंतराल: 20पिक्सल;
स्तंभ-भरें: संतुलन;
}
।लेख {
पृष्ठभूमि का रंग: #f8f8f8;
बॉर्डर-त्रिज्या: 4पिक्सल;
डब्बे की छाया: 0 2पिक्सल 4पिक्सलrgba(0, 0, 0, 0.1);
गद्दी: 10पिक्सल;
तोड़ना: परहेज-स्तंभ;
}

यह उदाहरण भी परिभाषित करता है तोड़ना संपत्ति पर ।लेख वर्ग, के मूल्य के साथ परहेज-स्तंभ. गुण यह सुनिश्चित करता है कि प्रत्येक लेख एकाधिक स्तंभों में बंटने के बजाय एक ही स्तंभ में बना रहे. यहाँ लेआउट कैसा दिखना चाहिए:

असमर्थित ब्राउज़रों के लिए फ़ॉलबैक का उपयोग करना

यह ध्यान रखना महत्वपूर्ण है कि द स्तंभ-गिनती संपत्ति सभी ब्राउज़रों में समर्थित नहीं है। ब्राउज़र जो समर्थन नहीं करते हैं स्तंभ-गिनती, इसके बजाय सामग्री को एक कॉलम में प्रदर्शित करेगा।

असमर्थित ब्राउज़रों के लिए फ़ॉलबैक शैली प्रदान करने के लिए, आप फ़ीचर क्वेरीज़ का उपयोग कर सकते हैं @समर्थन के लिए समर्थन का पता लगाने के लिए स्तंभ-गिनती संपत्ति और वैकल्पिक शैली प्रदान करें जब संपत्ति समर्थित नहीं है।

उदाहरण के लिए:

कंटेनर {
/* उन ब्राउज़र के लिए फ़ॉलबैक जो कॉलम-गिनती का समर्थन नहीं करते */
चौड़ाई: 100%;
}
/ * कॉलम-गिनती के लिए समर्थन का पता लगाएं */
@समर्थन (कॉलम-गिनती:3) {
कंटेनर {
स्तंभ-गिनती: 3;
 }
}

इस उदाहरण में, हम उपयोग करते हैं @समर्थन के लिए समर्थन का पता लगाने के लिए फीचर क्वेरी स्तंभ-गिनती संपत्ति। यदि ब्राउज़र कॉलम-काउंट का समर्थन करता है, तो CONTAINER तत्व तीन स्तंभों में प्रदर्शित होगा। यदि ब्राउज़र कॉलम-काउंट का समर्थन नहीं करता है, तो यह सामग्री को एक कॉलम में प्रदर्शित करेगा चौड़ाई संपत्ति।

सामग्री को कॉलम में तोड़ना

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

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