Plugin-free Multiple columns in WordPress post with CSS
Yes, you can write wordPress post dividing it into multiple columns with CSS like newspapers and magazines usually do . You can do the same, what WordPressers tends to, by the help of a plugin. But we’re going to highlight here the plugin-free process. This method will work in WordPress environment as well as any other platforms.
No need mastery. Simple know-how of CSS is enough. One can also just copy-paste the codes and use it in own website.
In WordPress context, a multiple column Block is added in Gutenburg editor. You can create multiple column in post but to limited extent. Doing the same thing with CSS means more flexibility, more freedom and more control.
To use our produced codes in WordPress, you needs to just add a Custom HTML block (in Gutenburg Editor) and paste the code in it. In Classic Editor, launch the Text mode in the post editor and paste the code which point you like in. You can check-out the following related link-
We’ll proceed through practical approach part by part. Just see and agree.
Fix number of Column
First, take a container div. Style it with border and background to make it visual like the following:
CODE
<div style="border:4px ridge black; background:aliceblue;">
Some text
</div>
OUTPUT
Now put some p elements inside the div and enrich them with Text.
CODE
<div style="border:4px ridge black;
background:aliceblue;">
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here.</p>
<p>Some text will go here. Some text will go here. Some text will go here. </p>
</div>
OUTPUT
Some text will go here. Some text will go here. Some text will go here. Some text will go here.
Some text will go here. Some text will go here. Some text will go here. Some text will go here.
Some text will go here. Some text will go here. Some text will go here.
Some text will go here. Some text will go here. Some text will go here.
Now add Column-count property Column-count:3 with the div. All the text will be divided into three columns.
CODE
<div style="border:4px ridge black;
background:aliceblue;
column-count:3;">
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here.</p>
<p>Some text will go here. Some text will go here. Some text will go here. </p>
</div>
OUTPUT
Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post.
Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post.
Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post. Some sample text to display multiple columns in wordpress post.
We see, All the texts are divided into three columns. A default column gap is notable. But you can specify the gap between columns by column-gap property. In this example, we use column-gap:40px. Let’s see the result:
CODE
<div style="border:4px ridge black;
background:aliceblue;
column-count:3;
column-gap:40px;">
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here.</p>
<p>Some text will go here. Some text will go here. Some text will go here. </p>
</div>
OUTPUT
Some text will go here. Some text will go here. Some text will go here. Some text will go here.
Some text will go here. Some text will go here. Some text will go here. Some text will go here.
Some text will go here. Some text will go here. Some text will go here.
Some text will go here. Some text will go here. Some text will go here.
Obviously, we see the effect.
Now let’s use column-rule property. This means we can draw a vertical line between columns and specify the width, style, and color of the line. These properties can be set separately as column-rule-width, column-rule-style and column-rule-color.
However we’re going to use shorthand property of these three- column-rule:4px groove magenta where width- 4px, style- groove and color- darkgreen. Just like we use in border or outline.
CODE
<div style="border:4px ridge black;
background:aliceblue;
column-count:3;
column-gap:40px;
column-rule:4px groove darkgreen;">
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here.</p>
<p>Some text will go here. Some text will go here. Some text will go here. </p>
</div>
OUTPUT
weerrr eiidjj riejjsk eidjue ielsjj ejisj eijd iejopoo w iejjf ijjsif ijeuf iwieur ieurioos
Sweerrr eiidjj riejjsk eidjue ielsjj ejisj eijd iejopoo w iejjf ijjsif ijeuf iwieur ieurioos
weerrr eiidjj riejjsk eidjue ielsjj ejisj eijd iejopoo w iejjf ijjsif ijeuf iwieur ieurioos
weerrr eiidjj riejjsk eidjue ielsjj ejisj eijd iejopoo w iejjf ijjsif ijeuf iwieur ieurioos.
Now suppose, you want to add a Heading to the texts that will extends all the columns. For this use column-span property with h element. Here we use column-span:all with h3. See the effect:
CODE
<div style="border:4px ridge black;
background:aliceblue;
column-count:3;
column-gap:40px;
column-rule:4px groove darkgreen;">
<h3 style="column-span:all;"> This is a Heading spanning all columns</h3>
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here. Some text will go here. </p>
<p>Some text will go here. Some text will go here. Some text will go here.</p>
<p>Some text will go here. Some text will go here. Some text will go here. </p>
</div>
OUTPUT
This is a Heading spanning all columns
doosu kduvh ourdj oeufj owiur ouejsoh oeuoidk oiejjf ouejs ouefhol oeuso ruoos rouw ieur otheo oeurjs ouero ouerjo oruoore
oosu kduvh ourdj oeufj owiur ouejsoh oeuoidk oiejjf ouejs ouefhol oeuso ruoos rouw ieur otheo oeurjs ouero ouerjo oruoore
oosu kduvh ourdj oeufj owiur ouejsoh oeuoidk oiejjf ouejs ouefhol oeuso ruoos rouw ieur otheo oeurjs ouero ouerjo oruoore
oosu kduvh ourdj oeufj owiur ouejsoh oeuoidk oiejjf ouejs ouefhol oeuso ruoos rouw ieur otheo oeurjs ouero ouerjo oruoore.
Hope you enjoyed!!
