CSS column-count प्रॉपर्टी किसी एलिमेंट के कंटेंट को कितने कॉलम (स्तंभों) में विभाजित करना है, यह निर्दिष्ट करती है। यह न्यूजपेपर/मैगजीन स्टाइल लेआउट बनाने के लिए उपयोगी है।
उदाहरण
नीचे दिए गए उदाहरण में, column-count: 4 का उपयोग करके कंटेंट को 4 कॉलम में विभाजित किया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
}
</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.
</div>
</body>
</html>
column-count के मान:
auto(डिफ़ॉल्ट):column-widthऔर उपलब्ध जगह के अनुसार कॉलम संख्या<integer>: निश्चित कॉलम संख्या (2,3,4, आदि)
संबंधित प्रॉपर्टीज:
column-width: आदर्श कॉलम चौड़ाई (ब्राउजर कॉलम संख्या गणना करता है)column-gap: कॉलम के बीच गैपcolumn-rule: कॉलम के बीच रेखाcolumn-fill: भरने का तरीकाcolumns:column-widthऔरcolumn-countशॉर्टहैंड
