CSS column-fill प्रॉपर्टी मल्टी-कॉलम लेआउट में कंटेंट को कॉलम में कैसे वितरित/भरा जाता है, इसे नियंत्रित करती है। यह तब लागू होती है जब कंटेनर की ऊंचाई निर्दिष्ट हो (ताकि कॉलम की ऊंचाई सीमित हो)।
उदाहरण
नीचे दिए गए उदाहरण में, column-fill: balance का उपयोग करके कंटेंट को 4 कॉलम में यथासंभव समान रूप से वितरित किया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-fill: balance;
}
</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-fill के मान:
balance(डिफ़ॉल्ट): कंटेंट को सभी कॉलम में यथासंभव समान ऊंचाई में वितरित करता हैauto: कंटेंट को क्रमिक रूप से भरता है (पहला कॉलम भरता है, फिर दूसरा, आदि); कॉलम ऊंचाई असमान हो सकती हैbalance-all(नया): फ्रैगमेंटेड कॉन्टेक्स्ट (पेजिनेटेड मीडिया) में सभी पेज/कॉलम में बैलेंस करता है
पूर्वापेक्षा: कंटेनर पर निश्चित ऊंचाई (height, max-height) या पेजिनेटेड मीडिया (प्रिंट) होना चाहिए।
