CSS3 का उपयोग करके कॉलम काउंट या चौड़ाई सेट करना

columns प्रॉपर्टी

CSS3 में कॉलम काउंट और चौड़ाई सेट करने के लिए columns प्रॉपर्टी का उपयोग करें। यह column-width और column-count प्रॉपर्टीज के लिए शॉर्टहैंड है।

सिंटैक्स:

columns: auto | column-width column-count | initial | inherit;

मान:

• auto: दोनों प्रॉपर्टीज डिफ़ॉल्ट पर (ब्राउज़र तय करता है)
• column-width: इष्टतम कॉलम चौड़ाई (न्यूनतम)
• column-count: अधिकतम कॉलम संख्या

उदाहरण 1: ऑटो कॉलम्स

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  columns: auto auto;
}
</style>
</head>
<body>
<h1>मशीन लर्निंग</h1>
<div class="demo">
  आज का आर्टिफिशियल इंटेलिजेंस (AI) ब्लॉकचेन और क्वांटम कंप्यूटिंग के प्रचार से कहीं आगे निकल चुका है। यह इस तथ्य के कारण है कि विशाल कंप्यूटिंग संसाधन आम आदमी के लिए आसानी से उपलब्ध हैं। डेवलपर्स अब नए मशीन लर्निंग मॉडल बनाने और बेहतर प्रदर्शन और परिणामों के लिए मौजूदा मॉडल्स को री-ट्रेन करने में इसका लाभ उठाते हैं। हाई परफॉरमेंस कंप्यूटिंग (HPC) की आसान उपलब्धता के परिणामस्वरूप मशीन लर्निंग कौशल रखने वाले IT पेशेवरों की अचानक बढ़ी मांग हुई है।
</div>
</body>
</html>

आउटपुट

ब्राउज़र स्वचालित रूप से उपलब्ध चौड़ाई के आधार पर कॉलम संख्या और चौड़ाई तय करेगा।

उदाहरण 2: फिक्स्ड कॉलम चौड़ाई और काउंट

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  -webkit-columns: 40px 3;
  -moz-columns: 40px 3;
  columns: 40px 3;
}
</style>
</head>
<body>
<h1>मशीन लर्निंग</h1>
<div class="demo">
  आज का आर्टिफिशियल इंटेलिजेंस (AI) ब्लॉकचेन और क्वांटम कंप्यूटिंग के प्रचार से कहीं आगे निकल चुका है। यह इस तथ्य के कारण है कि विशाल कंप्यूटिंग संसाधन आम आदमी के लिए आसानी से उपलब्ध हैं। डेवलपर्स अब नए मशीन लर्निंग मॉडल बनाने और बेहतर प्रदर्शन और परिणामों के लिए मौजूदा मॉडल्स को री-ट्रेन करने में इसका लाभ उठाते हैं। हाई परफॉरमेंस कंप्यूटिंग (HPC) की आसान उपलब्धता के परिणामस्वरूप मशीन लर्निंग कौशल रखने वाले IT पेशेवरों की अचानक बढ़ी मांग हुई है।
</div>
</body>
</html>

आउटपुट

अधिकतम 3 कॉलम, प्रत्येक न्यूनतम 40px चौड़ा। कंटेनर चौड़ाई के आधार पर वास्तविक कॉलम संख्या कम हो सकती है।

कॉलम प्रॉपर्टीज विवरण:

रिस्पॉन्सिव मल्टी-कॉलम लेआउट:

.responsive-columns {
  columns: 300px;           /* न्यूनतम 300px प्रति कॉलम */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

यह स्वचालित रूप से स्क्रीन चौड़ाई के आधार पर कॉलम संख्या एडजस्ट करता है - मोबाइल पर 1, टैबलेट पर 2, डेस्कटॉप पर 3+।

ब्राउज़र सपोर्ट:

• सभी आधुनिक ब्राउज़र्स
• वेंडर प्रीफिक्स: -webkit-columns, -moz-columns (पुराने के लिए)
• IE10+ (अनप्रीफिक्स्ड)