स्तंभ-काल - सीएसएस-ट्रिक्स

मल्टी-कॉलम लेआउट में, आप कॉलम के साथ तत्वों का विस्तार कर सकते हैं column-span।

h2 ( -webkit-column-span: all; column-span: all; )

column-spanमल्टी-कॉलम लेआउट के अंदर एक तत्व को असाइन करें इसे एक फैले हुए तत्व बनाने के लिए। बहु-स्तंभ लेआउट अगले गैर-फैले हुए तत्व के साथ फिर से शुरू होगा।

का मान column-spanसकते हैं या तो allया none।

column-span: allकॉलम को स्पैन करने के लिए एक तत्व सेट करें ।

noneसंपत्ति के लिए मूल्य एक फैले हुए तत्व के लिए किल स्विच है। फैले को रोकने के लिए फैले हुए तत्व को बताने के लिए मीडिया के प्रश्नों के साथ काम करते समय आप इसका उपयोग कर सकते हैं।

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

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

फ़ायरफ़ॉक्स इसका समर्थन नहीं करता है column-span, लेकिन दिलचस्प वर्कअराउंड हैं।

हालांकि सामान्य रूप से मल्टी-कॉलम लेआउट के लिए समर्थन यहां है:

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
91	87	१०	१२	१०

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	10.0-10.2

अपने उपसर्गों को मत भूलना!