column-width प्रॉपर्टी मल्टी-कॉलम लेआउट में प्रत्येक कॉलम की इष्टतम (optimal) चौड़ाई निर्दिष्ट करती है। ब्राउज़र उपलब्ध स्थान के आधार पर कॉलम की संख्या स्वचालित रूप से तय करता है।
उदाहरण: 100px कॉलम चौड़ाई के साथ 4 कॉलम
यहां column-count: 4 अधिकतम कॉलम संख्या सेट करता है, जबकि column-width: 100px न्यूनतम चौड़ाई निर्धारित करती है।
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-rule-color: gray;
column-rule-style: dashed;
column-rule-width: 2px;
column-width: 100px;
column-gap: 20px;
}
</style>
</head>
<body>
<div class="demo">
यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
</div>
</body>
</html>महत्वपूर्ण नोट
column-widthएक न्यूनतम चौड़ाई है, निश्चित नहीं- ब्राउज़र जितने कॉलम फिट हो सकें, उतने बनाएगा
column-countके साथ उपयोग करने पर यह अधिकतम कॉलम संख्या सीमित करता है- रिस्पॉन्सिव डिज़ाइन के लिए आदर्श
