कॉलम-भरण - सीएसएस-ट्रिक्स

विषय - सूची

जब आप एक बहु-स्तंभ तत्व में ऊंचाई जोड़ते हैं, तो आप यह नियंत्रित कर सकते हैं कि सामग्री कॉलम को कैसे भरती है। सामग्री संतुलित या क्रमिक रूप से भरी जा सकती है।

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

यह संपत्ति केवल फ़ायरफ़ॉक्स में उपलब्ध है। फ़ायरफ़ॉक्स स्वचालित रूप से एक ऊँचाई-संकुचित मल्टी-कॉलम लेआउट में सामग्री को संतुलित करेगा। ऊँचाई की बाधा होने पर अन्य ब्राउज़र हमेशा क्रमिक रूप से कॉलम भरेंगे।

फ़ायरफ़ॉक्स को अन्य ब्राउज़रों की तरह व्यवहार करने के लिए, जो कि क्रमिक रूप से कॉलम भरना है, आप सेट कर सकते हैं column-fill: auto।

मूल्यों

column-fillकीवर्ड मान balanceऔर स्वीकार करता है auto।

balanceप्रत्येक कॉलम को सामग्री की समान मात्रा के साथ भर देगा, लेकिन कॉलम को कॉलम से अधिक लंबा नहीं होने देगा height। आपको पता चल सकता है कि कॉलम उसी heightतरह से कम आएगा, जब ब्राउज़र सामग्री को समान रूप से क्षैतिज रूप से वितरित करता है।

autoप्रत्येक कॉलम को तब तक भरेगा जब तक कि वह पहुंच न जाए heightऔर ऐसा तब तक करे जब तक वह सामग्री से बाहर न निकल जाए। सामग्री को देखते हुए, यह मान आवश्यक रूप से सभी कॉलमों को नहीं भरेगा और न ही उन्हें समान रूप से भरेगा।

यह चश्मे में रस डालने जैसा है। आप प्रत्येक गिलास में एक समान मात्रा में रस डाल सकते हैं और पा सकते हैं कि आप प्रत्येक गिलास को शीर्ष पर नहीं भरते हैं ( balance)। वैकल्पिक रूप से, आप एक गिलास को ऊपर तक भर सकते हैं जब तक कि यह पूरा न हो जाए और इसे तब तक दोहराएं जब तक कि कोई रस न बचा हो। नतीजतन, शेष चश्मे में कम या कोई रस नहीं हो सकता ( auto)।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन कॉलम-भरण उदाहरण (CSS-Tricks) देखें।

ब्राउज़र का समर्थन

column-fillकीवर्ड मान विशेष रूप से फ़ायरफ़ॉक्स में काम करते हैं। उन्होंने अगस्त 2014 में काम नहीं किया जब यह पंचांग प्रविष्टि मूल रूप से लिखी गई थी, लेकिन अगस्त 2015 (क्रोम 44) में फिर से परीक्षण किए जाने पर। उस परीक्षण के दौरान, ऐसा लगता है कि मूल्य को गतिशील रूप से बदलने से आपको कोई राहत नहीं मिलनी चाहिए।

सामान्य रूप से बहु-स्तंभ लेआउट के लिए ब्राउज़र समर्थन: