CSS column-gap प्रॉपर्टी (पहले grid-column-gap ग्रिड के लिए) मल्टी-कॉलम लेआउट में कॉलम (स्तंभों) के बीच की जगह (गैप) निर्दिष्ट करती है। यह कॉलम कंटेंट के बीच पठनीयता के लिए आवश्यक स्पेस प्रदान करती है।
उदाहरण
नीचे दिए गए उदाहरण में, column-gap: 50px का उपयोग करके 4 कॉलम के बीच 50 पिक्सेल का गैप सेट किया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
}
</style>
</head>
<body>
<div class="demo">
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text.
</div>
</body>
</html>
column-gap के मान:
normal(डिफ़ॉल्ट): ब्राउजर डिफ़ॉल्ट (आमतौर पर 1em)<length>: निश्चित लंबाई (50px,2rem,3%)0: कोई गैप नहीं (कॉलम मिल जाएंगे)
संबंधित: column-count (कॉलम संख्या), column-width (कॉलम चौड़ाई), column-rule (कॉलम के बीच रेखा)।
