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

WP Darko

A responsive and easy-to-use tool for dividing your content in your posts/pages. This ultra-lightweight plugin allows you to put your content in columns of various widths. What you see is what you get, and it’s totally free.
<h4>Usage example</h4>
<h4>1. Create rows using [GDC_row]</h4>
<pre><code>[GDC_row][/GDC_row]
</code></pre>
<h4>2. Add columns using [GDC_column]</h4>
<pre><code>[GDC_row]

[GDC_column size="third"]
Your content here
[/GDC_column]

[GDC_column size="third"]
Your content here
[/GDC_column]

[GDC_column size="third"]
Your content here
[/GDC_column]

[/GDC_row]
</code></pre>
Available sizes
<ul>
<li>half</li>
<li>third</li>
<li>two-thirds</li>
<li>quarter</li>
<li>three-quarters</li>
</ul>
See more code examples on the <a href="https://wpdarko.com/support/docs/get-started-with-the-grid-shortcodes-plugin/" rel="nofollow ugc">documentation page</a>.
<h4>Support</h4>
Find help in <a href="https://wpdarko.com/support" rel="nofollow ugc">our forums</a> for this plugin (we’ll answer you fast, promise).

Grid Shortcodes

A responsive and easy-to-use tool for dividing your content in your posts/pages. This ultra-lightweight plugin allows you to put your content in colum …

Perfect Columns vs Grid Shortcodes