Grid Columns was created because, frankly, I was tired of seeing theme developers add poorly coded shortcodes to their themes to handle this functionality. This plugin creates a [column] shortcode to address that issue.
The plugin provides you with a shortcode called [column]. It allows you to create columnized content.
The [column] shortcode that takes in several arguments. The default arguments are the following.
[column grid="4" span="1" push="0" class=""]...[/column]2, 3, 4, 5, and 12.[column] shortcode's spans must add up to equal the grid number.span. This tells the script that you want to "push" this column over a specific number of sections. Basically, you're creating an empty space.Once you've installed and activated the plugin, using it is pretty simple. You only need to wrap the [column] shortcode around some content that you want to columnize. Of course, you can only use shortcodes in shortcode-ready areas such as the post content area.
By default, Grid Columns is set up to display 4 columns. Suppose you wanted to split your content into 4 columns/sections. You'd do so like this:
[column]This is some very cool example content to use as an example.[/column]
[column]This is some very cool example content to use as an example.[/column]
[column]This is some very cool example content to use as an example.[/column]
[column]This is some very cool example content to use as an example.[/column]That would output the following.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
Suppose you just wanted two columns. The following code would handle that.
[column grid="2" span="1"]This is some very cool example content to use as an example.[/column]
[column grid="2" span="1"]This is some very cool example content to use as an example.[/column]That would output the following.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
Let's do something a little more advanced. Suppose you wanted a 4-section grid with the first column taking up the space of two sections. Your code would look like the following:
[column span="2"]This is some very cool example content to use as an example.[/column]
[column span="1"]This is some very cool example content to use as an example.[/column]
[column span="1"]This is some very cool example content to use as an example.[/column]That would output the following.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
You probably noticed the span="1" and span="2" parts in the code. This represents the number of sections this particular column spans. So, if your grid is set up into 4 sections (default), you can only have a total span count of 4.
Let's look at a slightly more advanced usage. Suppose you wanted a grid of 5 with first and last columns spanning 2/5 of the grid and the middle column spanning 1/5 of the grid. Your code would look like the following.
[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]
[column grid="5" span="1"]This is some very cool example content to use as an example.[/column]
[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]That would output the following.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
The following examples will just show you the code and output. You should understand the basic usage at this point.
[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]
[column grid="5" span="1"]This is some very cool example content to use as an example.[/column]
[column grid="5" push="1" span="1"]This is some very cool example content to use as an example.[/column]This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
[column grid="12" span="6"]This is some very cool example content to use as an example.[/column]
[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]
[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]
[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
This is some very cool example content to use as an example.
[column grid="3" span="1"]This is some very cool example content to use as an example.[/column]
[column grid="3" span="1" push="1"]This is some very cool example content to use as an example.[/column]This is some very cool example content to use as an example.
This is some very cool example content to use as an example.