यदि आपको बहु-स्तंभ लेआउट को डिज़ाइन करते समय स्तंभों की सटीक संख्या की आवश्यकता होती है, तो उपयोग करें column-count
।
.lead ( column-count: 3; )
स्तंभों की संख्या को देखते हुए, ब्राउज़र समान रूप से उस संख्या के कॉलम में सामग्री वितरित करेगा।
इस संपत्ति का उपयोग शॉर्टहैंड में भी किया columns
जा सकता है और इसके साथ मिलावट में इस्तेमाल किया जा सकता है column-width
। जब दोनों संपत्तियों को घोषित किया column-count
जाता है तो अधिकतम संख्या में कॉलम होते हैं।
मूल्यों
column-count
auto
या पूर्णांक हो सकता है ।
का प्रयोग करें auto
अगर आप भी उपयोग कर रहे हैं column-width
। इसे ब्राउज़र को बताने का एक तरीका के रूप में सोचो, चलो column-width
नेतृत्व करने के लिए।
पूर्णांक, जिसे स्तंभों की संख्या के रूप में भी जाना जाता है, को 0 से अधिक या उसके बराबर होना चाहिए।
column-width
इस संपत्ति के विपरीत ब्राउज़र की चौड़ाई की परवाह किए बिना स्तंभों की संख्या धारण करेगा। इसका मतलब यह है कि यदि आपने अपने मोबाइल फोन पर 5-कॉलम वाला लेआउट बनाया है, तो आपके पास नेविगेट करने के लिए बहुत ही परिष्कृत 5-कॉलम वाला लेआउट होगा। column-count
सबसे अच्छा साथ काम करता है column-width
।
ब्राउज़र का समर्थन
बहु-स्तंभ लेआउट समर्थन:
क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
---|---|---|---|---|---|---|
कोई | 3+ | 1.5+ है | 11.1+ | 10+ | 81 | ३.२+ |
यदि आप एक ऐसे उपकरण का उपयोग नहीं कर रहे हैं जो पहले से ही मदद करता है।