CSS मल्टी-कॉलम
Optional Advanced ने अभी इमेज स्प्राइट देखा — एक शीट, कई टाइल। यह सेशन दूसरा optional टूल है: मल्टी-कॉलम। अखबार सोचो, टूलबार नहीं। CSS से कहते हो लंबा लेख दो या तीन ऊर्ध्व धाराओं में डाले। आप Grid पर अलग-अलग कार्ड नहीं बिठा रहे।
सीधा जवाब
CSS मल्टी-कॉलम लेआउट एक बहते ब्लॉक को — आमतौर पर लंबा टेक्स्ट — अखबारी कॉलम में बाँटता है। कितने कॉलम (column-count), आरामदायक चौड़ाई (column-width), गटर (column-gap), और वैकल्पिक खड़ी लाइन (column-rule)। टेक्स्ट, लिस्ट और इनलाइन सामग्री पहले कॉलम को भरती है, फिर अगले को। लंबी कॉपी के लिए। नेव, कार्ड डेक और पेज शेल के लिए Flexbox या Grid रखो ताकि हर बॉक्स पूरा यूनिट रहे।
कॉलम क्यों बने
बहुत लंबी लाइन पढ़ना कठिन है। पत्रिकाओं ने एक पेज पर कई छोटी कॉलम से हल किया। CSS ने वही विचार वेब के लिए लिया: एक एलिमेंट, एक टेक्स्ट स्ट्रीम, अपने आप कॉलम में लपेट। यह Flexbox नहीं (आइटम्स की पंक्ति/कॉलम) और Grid नहीं (द्विआयामी क्षेत्र मानचित्र)। मल्टी-कॉलम fragmentation टूल है — अगर रोका नहीं तो ब्राउज़र पैराग्राफ को कॉलम सीमा पर काट सकता है।
गिनती: «तीन कॉलम चाहिए»
column-count एक संख्या माँगता है। ब्राउज़र कंटेनर की चौड़ाई उतने कॉलम में बाँटता है (gap घटाकर):
.article {
column-count: 3;
max-width: 60rem;
}
चौड़े लेख पर तीन धाराएँ दिखेंगी। तंग फोन पर तीन पतली कॉलम पढ़ी नहीं जातीं — media query जोड़ो, या column-width रखो ताकि जगह कम हो तो गिनती गिरे।
चौड़ाई: «हर कॉलम लगभग इतनी»
column-width संकेत है, बंद पिक्सेल पिंजरा नहीं। ब्राउज़र कम-से-कम उतनी चौड़ी जितनी कॉलम फिट हों बनाता है:
.article {
column-width: 16rem;
max-width: 60rem;
}
बॉक्स ~48rem प्लस gap हो तो तीन कॉलम दिख सकते हैं; सिकुड़े तो दो, फिर एक। हर व्यूपोर्ट पर तय column-count: 3 से यह आमतौर पर शांत है। दोनों लगा सकते हो: गिनती अधिकतम, चौड़ाई न्यूनतम आराम। शॉर्टहैंड columns पहले चौड़ाई फिर गिनती, जैसे columns: 16rem 3।
गैप और रूल
कॉलम को साँस चाहिए। column-gap गटर है। column-rule उसी में पतली रेखा खींचता है (चौड़ाई, स्टाइल, रंग — बॉर्डर जैसा, लेकिन बॉक्स बॉर्डर जितनी अतिरिक्त लेआउट जगह नहीं लेता):
.article {
column-width: 16rem;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}
आंशिक शॉर्टहैंड हैं (column-rule-width, column-rule-style, column-rule-color)। रेखा शांत रखो; अखबार का विभाजक है, दूसरा डिज़ाइन सिस्टम नहीं।
शीर्षक जो सारी चौड़ाई ले
शीर्षक अक्सर पूरी चौड़ाई पर बैठे, कॉलम नीचे से शुरू हों। बच्चे पर column-span: all यही करता है:
.article h2 {
column-span: all;
margin: 0 0 1rem;
}
.article {
column-count: 2;
column-gap: 1.5rem;
}
रोज़मर्रा में none और all। Span शीर्षक, लीड फिगर या कॉलआउट के लिए — हर पैराग्राफ के लिए नहीं।
बॉक्स टूटे नहीं
कार्ड, कैप्शन वाली फिगर, या उद्धरण कॉलम ब्रेक से आधा कटे तो टूटा लगता है। break-inside: avoid ब्राउज़र से कहता है जहाँ हो सके वह बॉक्स एक कॉलम में रहे:
.article figure,
.article .callout {
break-inside: avoid;
margin: 0 0 1rem;
}
प्रिंट-जैसे फ्लो में break-before / break-after भी; पुराने ब्राउज़र में page-break-inside: avoid। हर लड़ाई नहीं जीतोगे — बहुत ऊँचे बॉक्स फिर भी overflow करते हैं — लेकिन लक्ष्य आमतौर पर कैप्शन को इमेज के साथ रखना है। column-fill: balance (अक्सर डिफ़ॉल्ट) ऊँचाई बराबर करता है; auto पहले पहला कॉलम भरता है (अखबार जंप जैसा)।
कॉलम बनाम Flex बनाम Grid
📊 Multi-column vs Flex vs Grid
| Tool | Job | Poor fit |
|---|---|---|
Multi-column (column-*) |
Long article, glossary, name list that should read like a newspaper | Card galleries, nav bars, full page shells |
| Flexbox | One-dimensional rows/columns of whole items (toolbar, chips, simple stacks) | Pouring a novel into three text streams |
| Grid | Two-dimensional page or component map (header / main / aside) | Replacing column-count on a <p> soup |
Sprites (background-position) |
Decorative icon tiles on a sheet | Laying out article text |
Flexbox और Grid मॉड्यूल आइटम प्लेसमेंट सिखा चुके। मल्टी-कॉलम justify-content या नामित क्षेत्र नहीं देता। यह एक स्ट्रीम बहाता है। अगर हर बच्चा टैप करने योग्य आयत रहे, Flex या Grid लो।
पेज क्रोम Flex या Grid ही रहे
पूरी साइट column-count: 3 मत बनाओ। हेडर, नेव और कार्ड डेक पूरे बॉक्स चाहते हैं:
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
.prose {
column-width: 18rem;
column-gap: 1.75rem;
}
.prose मल्टी-कॉलम हो सकता है। .card-deck नहीं। एक ही एलिमेंट पर दोनों मिलाना फिगर काटता है और बटन गलत धारा में डालता है।
तंग स्क्रीन और पढ़ने का क्रम
कॉलम आरामदायक लाइन से पतली हों (लगभग 12–16rem टेक्स्ट) तो एक कॉलम पर आओ। स्क्रीन रीडर और कीबोर्ड दस्तावेज़ क्रम चलते हैं, «एक कॉलम नीचे फिर अगला» विज़ुअल स्कैन नहीं — लेख के लिए ठीक; असंबद्ध विजेट डैशबोर्ड कॉलम से बनाना अटपटा। RTL भाषाओं में कॉलम writing mode से भरते हैं; रेखा गटर में ही रहती है।
खुद आज़माएँ
- कुछ पैराग्राफ
.proseमें लपेटो,column-count: 2औरcolumn-gap। column-width: 16remकरो और विंडो खींचो — गिनती बदलते देखो।- शांत ग्रे में
column-rule: 1px solidजोड़ो। <h2>परcolumn-span: all।- फिगर पर
break-inside: avoid। फिर वही CSS कार्ड ग्रिड पर लगाओ — वहाँ Flex/Grid क्यों शांत है दिखेगा।
आम गलतियाँ
- मल्टी-कॉलम को कार्ड गैलरी या पूरे पेज लेआउट की तरह
- फोन पर
column-count: 3जबरदस्ती ताकि लाइन में तीन शब्द हों column-gapभूलना और धाराएँ चिपकाना- इमेज और कैप्शन कॉलम सीमा पर टूटना
- कॉलम को Flex समझना: स्ट्रीम के लिए
flex-growनहीं - स्प्राइट से उलझना — स्प्राइट बैकग्राउंड काटता है; कॉलम टेक्स्ट तोड़ते हैं
सार
- मल्टी-कॉलम एक बहती स्ट्रीम को अखबारी कॉलम में डालता है
column-countसंख्या;column-widthआराम का न्यूनतम; दोनों मिला सकते होcolumn-gapऔरcolumn-ruleगटर सजाते हैं; शीर्षकcolumn-span: allbreak-inside: avoidफिगर और कॉलआउट जहाँ हो सके पूरे रखता है- पेज क्रोम और कार्ड डेक अभी Flex और Grid के हैं
- Optional Advanced आगे मास्किंग (
masking) से जारी रहता है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी