Create responsive multi-columns layout in a page or a post

Often you want to go beyond the basics and layout your content in multiple columns. In the old days, using a table was a non elegant but effective solution. However, today your content must adapt to all sizes of screens. It is called responsive layout. In this tutorial, you will learn how to layout your page content beautifully in multiple columns the responsive way. Premium HTML5 and Wordress themes from doTemplate provide a responsive grid layout you can use as follows.

2 Columns page or post

This is the code that you need to put in your Page or Post to create a 2-column responsive page or post.

<div class="section group">
	<div class="col span_1_of_2">
		1st responsive column and its content
	</div>
	<div class="col span_1_of_2">
		2nd responsive column and its content
	</div>
</div>

3 Columns page or post

This is the code that you need to put in your Page or Post to create a 3-column responsive page or post.

<div class="section group">
        <div class="col span_1_of_3">
		1st responsive column and its content
	</div>
	<div class="col span_1_of_3">
		2nd responsive column and its content
	</div>
	<div class="col span_1_of_3">
		3rd responsive column and its content
</div>

4 Columns page or post

This is the code that you need to put in your Page or Post to create a 4-column responsive page or post.

<div class="section group">
	<div class="col span_1_of_4">
		1st responsive column and its content
	</div>
	<div class="col span_1_of_4">
		2nd responsive column and its content
	</div>
	<div class="col span_1_of_4">
		3rd responsive column and its content
	</div>
	<div class="col span_1_of_4">
		4th responsive column and its content
	</div>	
</div>

5 Columns page or post

This is the code that you need to put in your Page or Post to create a 5-column responsive page or post.

<div class="section group">
	<div class="col span_1_of_5">
		1st responsive column and its content
	</div>
	<div class="col span_1_of_5">
		2nd responsive column and its content
	</div>
	<div class="col span_1_of_5">
		3rd responsive column and its content
	</div>
	<div class="col span_1_of_5">
		4th responsive column and its content
	</div>
	<div class="col span_1_of_5">
		5th responsive column and its content
	</div>		
</div>

2/3 1/3 Column page or post

This is the code that you need to put in your Page or Post to create a 2/3 1/3 column responsive page or post.

<div class="section group">
	<div class="col span_2_of_3">
		1st responsive column and its content 
	</div>
	<div class="col span_1_of_3">
		2nd responsive column and its content
	</div>
</div>

1/3 2/3 Column page or post

This is the code that you need to put in your Page or Post to create a 1/3 2/3 column responsive page or post.

<div class="section group">
	<div class="col span_1_of_3">
		1st responsive column and its content
	</div>
	<div class="col span_2_of_3">
		2nd responsive column and its content
	</div>
</div&gt

3/5 2/5 Column page or post

This is the code that you need to put in your Page or Post to create a 3/5 2/5 column page or post.

<div class="section group">
	<div class="col span_3_of_5">
		1st responsive column and its content
	</div>
	<div class="col span_2_of_5">
		2nd responsive column and its content
	</div>
</div>

Recommended Further readings

You might also like to check out the following tutorials.

WordPress related tutorials

Customize doTemplate web template with Online Template Builder
6 steps to apply doTemplate WordPress theme
Remove a comment box from a WordPress page or post
Create a new post
Create a new page

Image credits: Freepik