Premi Coder

CSS Multiple Columns Full information in Hindi.

नमस्कार दोस्तों स्वागत है एक बार फिर से Premi Coder website पर आज के इस पोस्ट में हम आपको बताएंगे कि आप किस प्रकार css की मदद से मल्टीप्ल कॉलम कैसे बना सकते हो

इसके बारे में हम आपको पूरा जानकारी देंगे इसके साथी हम कुछ example भी देंगे ताकि आपको अच्छी तरीके से समझ में आ सके।

CSS Multiple Columns.

दोस्तों सबसे पहले हम आपको मल्टीप्ल कॉलम्स के बारे में बताते हैं जैसे दोस्तों हम किसी भी पेज को क्रिएट करते हैं और उसमें हम कुछ टेक्स्ट लिखते हैं हम चाहते हैं कि उस टेक्स्ट को तीन कॉलम में रखें या आप कम या ज्यादा भी कर सकते हो

अब जो आप column क्रिएट किए हैं जो आपने टेक्स्ट लिखा था वह उन कॉलम में आ जाएगा

CSS Multiple Columns:

मल्टीपल columns propertieys दोस्तों हमने इसका सारा प्रॉपर्टीज नीचे लिख दिया है

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
column-fill
columns

Column-Count:

इस प्रॉपर्टी का use हम column काउंट करने के लिए करते हैं मान लीजिए आपने जो टेक्स्ट लिखा है उसको आप कितने कॉलम में रखना चाहते हैं जैसे 1,2,3,4 तो हम column count propertiey का उपयोग करते हैं

Column-Gap:

इसके नाम से ही पता चलता है कि इसका नाम कॉलम gap तो हम इस प्रॉपर्टी का उपयोग जो हम कॉलम क्रिएट करेंगे तो उनके अंदर कितना गैप रखना है तो हम इस प्रॉपर्टी का use करेंगे।

Colmuns-Rule-Style:

इस प्रॉपर्टी का use हम column style के लिए उपयोग करते हैं इसका वैल्यू 👉none, solid, double,dashed,groove,ridge, outset ,inset, hidden.

इनमें से किसी भी वैल्यू का उपयोग कर सकते हो

Column-Rule-Width:

इसमें मान लीजिए जैसे हम बॉर्डर की जो width होती है उसी प्रकार हम इसकी भी दे सकते हैं। इसमें आप यह वैल्यू दे सकते हो।

thin, medium ,thick, आप पिक्सल में भी लिख सकते हो जैसे 4px आदि ।

Column-Rule-Color:

इसमें आप जो भी कलम बनाओगे उसका कलर सेट करने के लिए इस प्रॉपर्टी का use करते हैं

Column-Rule: Shorthand propertieys:

column-rule एक शॉर्ट हैंड प्रॉपर्टी है जो कि हम इसमें

column-rule-style:solid;

        column-rule-width:4px;

        column-rule-color:red;

        shorthand👉 

        column-rule:4px solid red;

तो दोस्तों ऊपर आप देख सकते हो हमने code में समझा दिया है

Column-Span:

दोस्तों इस प्रॉपर्टी का use हम तब करते हैं जब हम मान लीजिए div tag के अंदर किसी tag जैसे h1 आदि

इसका दो वैल्यू होता है 👉 1 none ,2 all .

Column-Width:

इस प्रॉपर्टी का use हम column की width सेट करने के लिए करते हैं

Column-Fill:

इस प्रॉपर्टी का use हम टेक्स्ट को बैलेंस करने के लिए करते हैं इसका दो वैल्यू होता है 👉 1 balance 2 auto.

Columns:

यह एक शॉर्ट हैंड प्रॉपर्टी है इसमें हम column count और column width एक ही प्रॉपर्टी में सेट कर सकते हैं



            column-count:3;

            column-width:30px;

            shorthand👉 

            columns:30px 3;

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title><style>
         
            .PB{columns:100px 3;column-rule:3px solid hotpink;column-gap:10px;}
        </style>
    </head>
    <body>
    <div class="PB">
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    My name is prembabu Kashyap.
    </div>

 </body>
</html>

तो दोस्तों फाइनली हमने css की मदद से कैसे मल्टीप्ल कॉलम्स क्रिएट कर सकते हो उसके बारे में हमने पूरा जानकारी दे दिया है फिर भी अगर आपका कोई डाउट है या आप कुछ पूछना चाहते हैं या आप सलाह देना चाहते हैं तो आप कमेंट कर सकते हो