Welcome to all user to my website. Today we are going to learn "how to divide div into multiple columns using CSS and HTML?" in easy way.

How to divide div into multiple columns using CSS and HTML?/ CSS और HTML का उपयोग करके div को कई कॉलम में कैसे विभाजित करें?

Using HTML and CSS, you can easily create multiple column layout. First of all we have to need understand the Multi column properties./ HTML और CSS का उपयोग करके, आप आसानी से कई कॉलम layout बना सकते हैं। सबसे पहले हमें Multi column properties को समझना होगा ।

Following are the properties of Multiple Column Layout/ Multiple Column Layout के गुण निम्नलिखित हैं:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

Column-count:

The column-count property is define how many number of columns./ कॉलम-काउंट प्रॉपर्टी परिभाषित करती है कि कितने कॉलम हैं।

Column-gap:

The column-gap property is define the gap between columns./ कॉलम-गैप प्रॉपर्टी कॉलम के gap को परिभाषित करती है।

Column-rule-style:

This propriety used to define the style of the line drawn between columns in a multi-column layout./ यह स्तंभों के बीच खींची गई रेखा की शैली को परिभाषित करता था।

The value of column-rule-style are following:/ स्तंभ-नियम-शैली का मान निम्नलिखित है:

/* The <'border-style'> values */

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/*The Global values */

column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: revert;
column-rule-style: unset;

Column-rule-width:

It define the width of the rule between columns./ यह स्तंभों के बीच नियम की चौड़ाई को परिभाषित करता है।

Column-rule:

column-rule are shorthand of column-rule-style, column-rule-width, column-rule-color properties. You not need to write this properties in three lines, we simply write in one line.आपको column-rule-style, column-rule-width, column-rule-color को तीन पंक्तियों में लिखने की आवश्यकता नहीं है, हम केवल एक पंक्ति में लिखते हैं।

Column-span:

It define how many columns an element should span across./ यह परिभाषित करता है कि एक तत्व को कितने कॉलम में फैलाना चाहिए।

Column-width:

Column-width define the optimal width of the column./ Column-width कॉलम की इष्टतम चौड़ाई को परिभाषित करें।

Example of Multi column Using Coding

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}

.main-div {
max-width: 950px;
margin: 100px auto;
background-color: #000000;
color: #ffffff;
padding: 30px;
}

.sub-div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: lightblue;
column-rule: 1px solid lightblue;
column-width: 200px;
}

h1 {
column-span: all;
}
</style>
</head>
<body>
<div class="main-div">
<div class="sub-div">
<h1>Write text here in heading tag</h1>
<p>Write text here in paragraph tag</p>
</div>
</div>
</body>
</html>

Final Result

how to divide div into multiple columns using CSS and HTML?/ CSS और HTML का उपयोग करके div को कई कॉलम में कैसे विभाजित करें?

I hope you have learned from reading this post. If you like this post then share it with your friends and you can comment on any of your doubts and I will replay then at the earliest.

मुझे उम्मीद है कि आपने इस पोस्ट को पढ़कर सीखा होगा। अगर आपको यह पोस्ट पसंद आया हो तो इसे अपने दोस्तों के साथ शेयर करें और आप अपने किसी भी संदेह पर टिप्पणी कर सकते हैं और मैं इसे जल्द से जल्द फिर से चलाऊंगा।