CSS Columns

Newspapers एक सदी से भी ज़्यादा समय से multi-column text layouts इस्तेमाल कर रहे हैं, readers को एक लंबे, wide paragraph के बजाय छोटी, ज़्यादा comfortable line lengths scan करने देते हुए। CSS Multi-column Layout वही newspaper-style flow web पर बस कुछ properties से लाता है। Content को हाथ से अलग boxes में split करने के बजाय, आप एक single container पर column-count या column-width लागू करते हैं, और browser automatically content को जितने भी columns fit हो सकें उनमें flow कर देता है, एक column से अगले में naturally wrap करते हुए। cookiescursor.com पर long-form text के लिए यह एक बेहतरीन fit है, जैसे कोई glossary या FAQ page, जहाँ readers को बिना किसी custom grid layout की ज़रूरत के छोटी line lengths से फ़ायदा होता है।

In this page:

column-count
column-width
column-gap
column-rule
Awkward Breaks को रोकना

Syntax

css

selector {
  column-count: number;
  column-gap: length;
  column-rule: width style color;
}

column-count

column-count किसी container के content को एक specific संख्या के columns में split करता है, browser को एक column से अगले में flow को automatically wrap करने देते हुए। यह CSS multi-column layout module है, flexbox या grid से अलग, और लंबे flowing text जैसे articles के लिए सबसे उपयुक्त है।

Note:

एक typical desktop-width container पर body text के लिए तीन columns एक comfortable default हैं, अपने content के आधार पर वहाँ से adjust करें।
Accepted values:
column-count — columns की संख्या, या auto
column-width — 200px जैसी ideal width
column-gap — length, या normal
column-rule — columns के बीच line, जैसे 1px solid #ccc
column-span — none | all

Warning: किसी narrow screen पर, एक high column-count columns को असुविधाजनक रूप से narrow, पढ़ने में मुश्किल width तक squeeze कर सकता है।

उदाहरण: column-count

css

<style>
.text {
  column-count: 3;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">Long flowing text automatically wraps from one column into the next.</div>

column-width

column-width एक fixed count के बजाय हर column की एक target width set करता है, browser को container जितनी अनुमति दे उतनी लगभग उस width के columns fit करने देते हुए। क्योंकि column count container के size के हिसाब से adapt होती है, यह property बिना किसी media queries के naturally responsive है।

Note:

column-width naturally responsive है, क्योंकि columns की संख्या container के wider या narrower होने पर automatically adjust हो जाती है।
Accepted values:
column-width: auto — default, कोई minimum width नहीं
column-width: <length> — ideal minimum column width
columns: 200px 3 — width और count का shorthand
column-count — दोनों combine होते हैं, count एक maximum की तरह काम करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: column-width एक minimum target है, exact value नहीं, इसलिए actual rendered column widths available space को evenly भरने के लिए थोड़ी अलग हो सकती हैं।

उदाहरण: column-width

css

<style>
.text {
  column-width: 200px;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">Fits as many 200px columns as the container allows, no media queries needed.</div>

column-gap

column-gap adjacent columns के बीच की space set करता है, control करते हुए कि text के एक column को अगले से कितनी breathing room अलग करती है। पर्याप्त gap के बिना, adjacent columns में text visually आपस में मिल सकता है और पढ़ना मुश्किल हो सकता है।

Note:

24px और 40px के बीच का column-gap एक comfortable range है जो बहुत ज़्यादा horizontal space बर्बाद किए बिना columns को अलग महसूस कराता है।
Accepted values:
column-gap: normal — default, multi-column में 1em
column-gap: <length> — fixed gap
column-gap: <percentage> — container के relative
gap — row-gap और column-gap दोनों set करता है; multi-column पर भी लागू होता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: एक बहुत छोटा column-gap columns को एक confusing single block जैसा महसूस करा सकता है, खासतौर पर उन्हें अलग करने वाली कोई visible rule line के बिना।

उदाहरण: column-gap

css

<style>
.text {
  column-count: 2;
  column-gap: 40px;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">Generous space between the two columns</div>

column-rule

column-rule columns के बीच एक dividing line draw करता है, border shorthand जैसी ही style, width, और color syntax इस्तेमाल करते हुए, purely एक visual separator के रूप में। यह rule columns के बीच के gap के अंदर बैठती है और खुद column width को कभी असर नहीं करती, सिर्फ visual divider को।

Note:

एक पतला, light-colored column-rule आमतौर पर काफ़ी है, इसे बस visible होना चाहिए, bold नहीं।
Accepted values:
column-rule: <width> <style> <color> — shorthand
column-rule-width: thin | medium | thick | <length> — line की मोटाई
column-rule-style: solid | dashed | dotted | none — line style
column-rule-color: <color> — line color
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: column-rule सिर्फ एक line draw करता है, यह अपने आप कोई spacing नहीं जोड़ता, एक well-balanced look के लिए इसे column-gap के साथ जोड़ें।

उदाहरण: column-rule

css

<style>
.text {
  column-count: 2;
  column-rule: 1px solid #ccc;
  background: #f5f5f5;
  padding: 12px;
}
</style>
<div class="text">A thin dividing line between columns</div>

Awkward Breaks को रोकना

break-inside: avoid किसी specific element को, जैसे कोई heading या card, दो columns में awkwardly split होने से रोकता है। column-span: all किसी element को, जैसे कोई title, सिर्फ एक के अंदर बैठने के बजाय हर column में फैलने देता है।

Note:

किसी self-contained block पर, जैसे किसी image caption या एक छोटे card पर, break-inside: avoid लागू करें, जो अगर बीच में split हो जाए तो टूटा हुआ दिखेगा।
Accepted values:
break-inside: avoid — किसी item को एक column के अंदर रखता है
break-before: column — पहले एक नया column force करता है
break-after: column — बाद में एक नया column force करता है
column-span: all — सभी columns में फैलता है

Warning: column-span: all किसी element को normal column flow से पूरी तरह हटा देता है, इसलिए इसे section titles के लिए जानबूझकर इस्तेमाल करें, regular flowing content के लिए नहीं।

उदाहरण: Preventing Awkward Breaks

css

<style>
.text {
  column-count: 2;
  background: #f5f5f5;
  padding: 12px;
}
h2 {
  column-span: all;
}
.card {
  break-inside: avoid;
  background: white;
  border: 1px solid #ccc;
  padding: 8px;
  margin-bottom: 8px;
}
</style>
<div class="text">
  <h2>Spans all columns</h2>
  <div class="card">Never split mid-way</div>
</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Buttons Next Lesson → CSS Clip Path

CSS Columns

column-count

column-width

column-gap

column-rule

Awkward Breaks को रोकना

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code