CSS3 का उपयोग करके कॉलम गैप सेट करना

column-gap प्रॉपर्टी

CSS3 में कॉलम गैप सेट करने के लिए column-gap प्रॉपर्टी का उपयोग करें।

सिंटैक्स:

column-gap: length | normal | initial | inherit;

मान:

• length: निश्चित गैप (px, em, rem, आदि)
• normal: ब्राउज़र डिफ़ॉल्ट (आमतौर पर 1em)

उदाहरण 1: फिक्स्ड कॉलम गैप (25px)

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  column-count: 4;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
}
</style>
</head>
<body>
<h1>मशीन लर्निंग</h1>
<div class="demo">
  आज का आर्टिफिशियल इंटेलिजेंस (AI) ब्लॉकचेन और क्वांटम कंप्यूटिंग के प्रचार से कहीं आगे निकल चुका है। यह इस तथ्य के कारण है कि विशाल कंप्यूटिंग संसाधन आम आदमी के लिए आसानी से उपलब्ध हैं। डेवलपर्स अब नए मशीन लर्निंग मॉडल बनाने और बेहतर प्रदर्शन और परिणामों के लिए मौजूदा मॉडल्स को री-ट्रेन करने में इसका लाभ उठाते हैं। हाई परफॉरमेंस कंप्यूटिंग (HPC) की आसान उपलब्धता के परिणामस्वरूप मशीन लर्निंग कौशल रखने वाले IT पेशेवरों की अचानक बढ़ी मांग हुई है।
</div>
</body>
</html>

आउटपुट

4 कॉलम्स जिनके बीच 25px का गैप है।

उदाहरण 2: नॉर्मल कॉलम गैप

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -webkit-column-gap: normal;
  -moz-column-gap: normal;
  column-gap: normal;
}
</style>
</head>
<body>
<h1>मशीन लर्निंग</h1>
<div class="demo">
  आज का आर्टिफिशियल इंटेलिजेंस (AI) ब्लॉकचेन और क्वांटम कंप्यूटिंग के प्रचार से कहीं आगे निकल चुका है। यह इस तथ्य के कारण है कि विशाल कंप्यूटिंग संसाधन आम आदमी के लिए आसानी से उपलब्ध हैं। डेवलपर्स अब नए मशीन लर्निंग मॉडल बनाने और बेहतर प्रदर्शन और परिणामों के लिए मौजूदा मॉडल्स को री-ट्रेन करने में इसका लाभ उठाते हैं। हाई परफॉरमेंस कंप्यूटिंग (HPC) की आसान उपलब्धता के परिणामस्वरूप मशीन लर्निंग कौशल रखने वाले IT पेशेवरों की अचानक बढ़ी मांग हुई है।
</div>
</body>
</html>

आउटपुट

2 कॉलम्स जिनके बीच ब्राउज़र डिफ़ॉल्ट गैप (सामान्यतः 1em ≈ 16px) है।

कॉलम गैप के लिए सर्वोत्तम अभ्यास:

• सुसंगत स्पेसिंग के लिए rem या em उपयोग करें
• पठनीयता के लिए न्यूनतम 1.5rem (24px) गैप रखें
रिस्पॉन्सिव गैप: column-gap: clamp(1rem, 3vw, 3rem)

संबंधित प्रॉपर्टीज:

.multi-col {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #ccc;  /* कॉलम्स के बीच रेखा */
  column-fill: balance;         /* कंटेंट समान वितरण */
}

column-gap फ्लेक्सबॉक्स/ग्रिड में भी:

.flex-container {
  display: flex;
  gap: 20px;           /* मॉडर्न: row-gap + column-gap शॉर्टहैंड */
  column-gap: 20px;    /* फ्लेक्स/ग्रिड में भी काम करता है */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;    /* ग्रिड कॉलम गैप */
}