Corey McKrill

This plugin is intended for theme developers and others who want to have full control of their column styles while still providing a quick and easy framework for adding/editing column content via WordPress’s visual editor. It eliminates the need to type tedious, unmanageable chunks of HTML into the editor when specific posts or pages require a columnar layout.
That said, this plugin is not plug-and-play. It does not include any styles out-of-the-box, so if you start using the shortcodes without adding appropriate CSS rules, there probably won’t be any visible changes to your content.
See the <a href="https://github.com/jupiterwise/Columns-DIY/wiki/Recipes" rel="nofollow ugc">Recipes</a> page on the GitHub wiki for some styling examples.
<h4>Usage</h4>
<ul>
<li>Designate each column with <code>[column]</code> and <code>[/column]</code></li>
<li>Mark the end of a row with <code>[endrow]</code></li>
</ul>
<h4>Features</h4>
<ul>
<li>Includes enumerated column and row classes, allowing for per-column and -row styling. Also includes parity classes (odd/even) for striping.</li>
<li>If a user forgets to add the last <code>[endrow]</code> shortcode, the plugin will automatically insert a closing <code></div></code> so the site layout doesn’t get broken.</li>
<li>Cleans up errant <code></code> and <code> </code> tags that result from WordPress’s <code>wpautop()</code> function.</li>
<li>All parameter inputs are escaped for security.</li>
</ul>
<h4>Example</h4>
Putting this into the visual editor:
<blockquote>
<code>[column]</code>
This is the column of Foo.
<code>[/column]</code>
<code>[column]</code>
This is the column of Bar.
<code>[/column]</code> <code>[endrow]</code>
</blockquote>
Will result in this output:
This is the column of Foo.
 
This is the column of Bar.
 

<h4>Parameters</h4>
The following optional parameters can be added to the <code>[column]</code> shortcode:
<ul>
<li>class (String : ”) 
Classes for the column <code><div></code> element. Separate multiple classes with spaces.</li>
<li>rowclass (String : ”) 
Classes for the row <code><div></code> element. Only works when included with the first <code>[column]</code> shortcode in a row.</li>
<li>style (String : ”) 
Inline styles for the column <code><div></code> element.</li>
<li>rowstyle (String : ”) 
Inline styles for the row <code><div></code> element. Only works when included with the first <code>[column]</code> shortcode in a row.</li>
<li>norow (Boolean : false) 
Set to true to omit the row wrapper <code><div></code>.</li>
</ul>
<h4>Filters</h4>
The following filter hooks can be used to alter the output of the shortcodes:
<ul>
<li><code>diy_colclass</code></li>
<li><code>diy_colstyle</code></li>
<li><code>diy_column</code></li>
<li><code>diy_rowclass</code></li>
<li><code>diy_rowstyle</code></li>
<li><code>diy_beginrow</code></li>
<li><code>diy_endrow</code></li>
</ul>

Columns DIY

Simple shortcodes for div-based columns and rows. Wrap desired content in [column][/column]. Mark the end of a row with [endrow]. CSS not included.

moto_485

If you need two, three or more columns of text or images and need them to be exactly the same using on CSS3 then this is it.
First insert a [row] shortcode (this needs to wrap around every new row) then click the numbers until you have added shortcodes that add up to 12.
Example – 
[row]
[p-col-3]
Content Here
[/p-col-3]
[p-col-3]
Content Here
[/p-col-3]
[p-col-3]
Content Here
[/p-col-3]
[p-col-3]
Content Here
[/p-col-3]
[/row]
These rows will collapse for mobile devices.
Feel free to over write the css in your themes style sheet.
NOTE 
This uses box-sizing:border-box in the css you may notice a slight change in your theme if not already using this.
If you do you will need to adjust your themes css. 
Basically you may find you lose width in your DIVs, it should be just an easy matter of adding some width to these DIVs.
What box-sizing:border-box does is set your width, for example: 
If your DIV was set to a width of 100px and you added padding-left:5px; border-left:1px solid; this padding and border will be added inside the DIV in turn not effecting the 100px width. With out this in the css 100px width would be expanded to a total of 106px.

Perfect Columns

Add shortcodes to easily create up to 12 equal columns in your pages and posts

Columns DIY vs Perfect Columns