CSS column-span प्रॉपर्टी - एलिमेंट को कॉलम में फैलाएं

column-span प्रॉपर्टी किसी एलिमेंट को मल्टी-कॉलम लेआउट में सभी कॉलम में फैलाने (span) की अनुमति देती है। यह मुख्य रूप से हेडिंग्स के लिए उपयोगी है जो सभी कॉलम में फैलने चाहिए।

उदाहरण: हेडिंग को सभी कॉलम में फैलाना

column-span: all का उपयोग करके <h1> को सभी 4 कॉलम में फैलाया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-rule-color: maroon;
      column-rule-style: dashed;
      column-rule-width: 2px;
      column-gap: 20px;
    }
    h1 {
      column-span: all;  /* हेडिंग सभी कॉलम में फैलेगी */
      text-align: center;
      color: maroon;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    <h1>यह हमारा हेडिंग है।</h1>
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
  </div>
</body>
</html>

मान

• none (डिफ़ॉल्ट) - एलिमेंट कॉलम में नहीं फैलेगा
• all - एलिमेंट सभी कॉलम में फैलेगा

ब्राउज़र सपोर्ट

सभी आधुनिक ब्राउज़र्स में सपोर्टेड है। Firefox में column-span के लिए आंशिक सपोर्ट है।