Articles
CSS का परिचय
कॉलम लेआउट से संबंधित CSS गुण

कॉलम लेआउट से संबंधित CSS गुण

यह लेख कॉलम लेआउट से संबंधित CSS गुणों की व्याख्या करता है।

आप कॉलम लेआउट का वर्णन करना सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

कॉलम लेआउट

कॉलम्स 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

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

  • इस उदाहरण में, सामग्री को 3 कॉलमों में विभाजित किया गया है जिसमें 20px का गैप और कॉलमों के बीच 2px का नियम है। इसके अलावा, h5 तत्व कई कॉलमों में फैला हुआ है।

columns, column-width और column-count गुणों के लिए संक्षिप्त रूप है।

columns गुण की वाक्य रचना 

1columns: <column-width> <column-count>;

columns निम्नलिखित प्रारूप का अनुसरण करता है।

  • <column-width>: प्रत्येक कॉलम की चौड़ाई निर्दिष्ट करता है। आप auto या किसी भी लंबाई इकाई (जैसे, px, em, %, आदि) का मान के रूप में उपयोग कर सकते हैं।
  • <column-count>: कॉलमों की संख्या निर्दिष्ट करता है। एक संख्यात्मक मान के रूप में व्यक्त।
column-width गुण 
1.container {
2  column-width: 250px;
3}

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

  • इस उदाहरण में, प्रति कॉलम की चौड़ाई 250px है, और कंटेनर की चौड़ाई के आधार पर इष्टतम कॉलमों की संख्या की गणना की जाती है।
कॉलम-काउंट प्रॉपर्टी 
1.container {
2  column-count: 3;
3}

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

  • इस उदाहरण में, कंटेनर के अंदर की सामग्री को तीन कॉलमों में विभाजित किया गया है।
कॉलम-गैप प्रॉपर्टी 
1.container {
2  column-gap: 20px;
3}

कॉलम-गैप एक प्रॉपर्टी है जो प्रत्येक कॉलम के बीच की जगह (गैप) को निर्दिष्ट करती है। CSS ग्रिड के साथ एक सामान्य प्रॉपर्टी गैप भी होती है, लेकिन जब आप केवल कॉलमों के बीच की मार्जिन को कस्टमाइज़ करना चाहते हैं तो कॉलम-गैप उपयोगी होती है।

  • इस उदाहरण में, प्रत्येक कॉलम के बीच 20px की मार्जिन है। डिफ़ॉल्ट मान 16px है।
कॉलम-रूल प्रॉपर्टी 
1.container {
2  column-rule: 2px solid #333;
3}

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

  • इस उदाहरण में, कॉलमों के बीच 2px की चौड़ाई वाली एक ठोस काली रेखा दिखाई गई है। कॉलम-रूल को निम्नलिखित तीन प्रॉपर्टीज़ में विभाजित किया जा सकता है।
    • कॉलम-रूल-विथ: रेखा की चौड़ाई को निर्दिष्ट करता है।
    • कॉलम-रूल-स्टाइल: रेखा की शैली को निर्दिष्ट करता है। उदाहरण के लिए, सॉलिड, डैश्ड, डॉटेड आदि।
    • कॉलम-रूल-कलर: रेखा का रंग निर्दिष्ट करता है।
कॉलम-स्पैन प्रॉपर्टी 
1h5 {
2  column-span: all;
3}

कॉलम-स्पैन एक प्रॉपर्टी है जो किसी विशेष तत्व को कई कॉलमों में फैलाने के लिए सेट करती है। यह मुख्य रूप से हेडिंग या शीर्षकों जैसे तत्वों के लिए उपयोग की जाती है। दो संभावित मान हैं:। - नन: तत्व कॉलमों में नहीं फैलता और एक कॉलम के भीतर फिट होता है। यह डिफ़ॉल्ट मान है। - ऑल: तत्व सभी कॉलमों में फैलते हुए प्रदर्शित होता है।

  • इस उदाहरण में, h5 तत्व कई कॉलमों में फैलते हुए प्रदर्शित किया गया है।
‘कॉलम-फिल’ प्रॉपर्टी 
1.container {
2  column-fill: balance;
3}

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

  • यह सेटिंग सामग्री को समान रूप से वितरित करने के लिए समायोजन करती है।
मीडिया क्वेरी के साथ उपयोग करना 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

‘कॉलम’ प्रॉपर्टी को मीडिया क्वेरी के साथ जोड़ा जा सकता है ताकि रिस्पॉन्सिव डिज़ाइन का समर्थन किया जा सके। आप विभिन्न स्क्रीन आकारों के अनुसार कॉलम की संख्या और चौड़ाई को लचीले ढंग से बदल सकते हैं।

  • इस उदाहरण में, जब स्क्रीन की चौड़ाई 600px या उससे कम हो, तो 1 कॉलम होगा। चौड़ी स्क्रीन के लिए, इसे 3 कॉलम में विभाजित किया जाएगा, प्रत्येक की चौड़ाई 200px होगी।

सारांश

CSS की ‘कॉलम’ प्रॉपर्टी एक शक्तिशाली उपकरण है जो कई कॉलम का उपयोग करके लेआउट को आसानी से लागू करने देती है। यह रिस्पॉन्सिव डिज़ाइन और ऐसे टेक्स्ट लेआउट्स के लिए विशेष रूप से उपयोगी है, जो पठनीयता को प्राथमिकता देते हैं। संबंधित प्रॉपर्टीज़ को मिलाकर, आप कॉलम की संख्या और चौड़ाई, गैप्स, सजावट आदि को लचीले ढंग से कस्टमाइज़ कर सकते हैं।

यह अधिक परिष्कृत डिज़ाइनों को आसानी से लागू करने की अनुमति देता है, इसलिए कृपया इसका उपयोग करें।

ऑर्डर 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

CSS की ‘ऑर्डर’ प्रॉपर्टी का उपयोग फ्लेक्सबॉक्स या ग्रिड लेआउट्स में एलिमेंट्स के प्रदर्शन क्रम को नियंत्रित करने के लिए किया जाता है। सामान्यत: एलिमेंट्स को HTML मार्कअप के अनुसार रेंडर किया जाता है, लेकिन आप ‘ऑर्डर’ प्रॉपर्टी का उपयोग करके उनके दृश्यक्रम को बदल सकते हैं। यह प्रॉपर्टी लचीले यूज़र इंटरफेस डिज़ाइन करने और रिस्पॉन्सिव डिज़ाइन बनाने में मदद करती है।

  • इस उदाहरण में, आइटम्स को HTML में ‘आइटम 1’, ‘आइटम 2’, ‘आइटम 3’ के रूप में मार्कअप किया गया है, लेकिन CSS की ‘ऑर्डर’ प्रॉपर्टी के कारण प्रदर्शन क्रम ‘आइटम 2’, ‘आइटम 3’, ‘आइटम 1’ में बदल जाता है।

‘ऑर्डर’ प्रॉपर्टी के मूल सिद्धांत

‘ऑर्डर’ प्रॉपर्टी फ्लेक्सबॉक्स या ग्रिड कंटेनरों के अंदर मौजूद आइटम्स पर लागू होती है। आप प्रत्येक आइटम के लिए पूर्णांक मान सेट करके प्लेसमेंट का क्रम निर्धारित करते हैं। डिफ़ॉल्ट रूप से, सभी आइटम का order मान 0 पर सेट होता है। इस मान को बदलकर, आप यह निर्दिष्ट कर सकते हैं कि आइटम किस क्रम में प्रदर्शित होंगे।

मूल वाक्यविन्यास 
1.item {
2  order: <integer>;
3}
  • आप order के लिए किसी भी पूर्णांक को निर्दिष्ट कर सकते हैं। सकारात्मक, नकारात्मक, या शून्य मान उपयोग किए जा सकते हैं। मान जितना छोटा होगा, तत्व उतना जल्दी प्रदर्शित होगा, और मान जितना बड़ा होगा, तत्व उतना देर से प्रदर्शित होगा।

सकारात्मक और नकारात्मक मानों का उपयोग करना

आप order प्रॉपर्टी को नकारात्मक मान भी सौंप सकते हैं। नकारात्मक मान वाले तत्व डिफ़ॉल्ट क्रम से पहले प्रदर्शित होते हैं।

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

इस उदाहरण में, Item 1 का मान order: -1 पर सेट है, इसलिए यह सबसे पहले प्रदर्शित होता है। इसके विपरीत, Item 3 का मान order: 1 पर और Item 2 का मान order: 2 पर सेट है, इसलिए ये क्रम में प्रदर्शित होते हैं।

उत्तरदायी डिज़ाइन (Responsive Design) में order

उत्तरदायी डिज़ाइन में, स्क्रीन आकार के अनुसार तत्वों के क्रम को बदलना संभव है। उदाहरण के लिए, मोबाइल दृश्य में, आप महत्वपूर्ण जानकारी को पहले प्रदर्शित करने के लिए तत्वों के क्रम को बदल सकते हैं।

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

इस उदाहरण में, सामान्य दृश्य में आइटम Item 1, Item 2, Item 3 के क्रम में प्रदर्शित होते हैं, लेकिन जब स्क्रीन की चौड़ाई 600px से कम होती है, तो Item 2 सबसे पहले, Item 3 उसके बाद, और Item 1 सबसे अंत में प्रदर्शित होता है।

order के लिए विचार

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

निष्कर्ष

CSS की order प्रॉपर्टी एक शक्तिशाली उपकरण है जो आपको Flexbox या Grid लेआउट में तत्वों के प्रदर्शन क्रम को आसानी से नियंत्रित करने की अनुमति देती है। सकारात्मक या नकारात्मक मानों का उपयोग करके, आप तत्वों के क्रम को लचीले ढंग से बदल सकते हैं, जो विशेष रूप से उत्तरदायी डिज़ाइन में उपयोगी है। हालाँकि, पहुंचने की क्षमता और दृश्य क्रम और HTML संरचना के बीच अंतर पर ध्यान देना आवश्यक है। यदि इनका सही तरीके से विचार किया जाता है, तो order प्रॉपर्टी अधिक गतिशील और लचीले लेआउट बनाने के लिए उपयोगी हो सकती है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

ग्रिड लेआउट से संबंधित CSS गुण