This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Responsive Grid Shortcode

Description

The plugin utilizes the 12 column responsive grid CSS from http://www.responsivegridsystem.com/ with the default 1.6% margin and 480PX media query.

Major features in Responsive Grid Shortcode include:

  • Responsive grids up to 12 columns
  • Add classes to each column or section for precise control over styles.
  • Simple to use shortcode. All you have to know is how to count to 12!

The shortcode are extremely simply to follow as they follow as you can see below.

[grid_section]

[grid_col size=4]
    First Col Content
[/grid_col]

[grid_col size=4]
    Second Col Content
[/grid_col]

[grid_col size=4]
    Third Col Content
[/grid_col]

[/grid_section]

NOTE: The one thing to keep in mind is that all the column sizes inside a section MUST equal 12.

Some things that you should note. Responsive Grid Shortcode default to size 6 if no size attribute is provided.
An example of this is below:

[grid_section]

[grid_col]
    Left Side
[/grid_col]

[grid_col]
    Right Side
[/grid_col]

[/grid_section]

FYI: The column size can be any number. The each size value represents {size} of 12.

OPTIONS

We kept the options extremely simple to make sure the system is light weight.

[grid_section class=custom-class]

  • class – You can provide a custom class to the section if you choose.

[grid_col size=4 class=custom-class]

  • class (optional) – You can provide a custom class to the column if you choose.
  • size (optional) – number out of 12. (2 = 2 out 12 | 3 = 3 out of 12)

Example

`
[grid_section class=my-grid]

[grid_col size=8]The size of this colum is 8[/grid_col]
[grid_col size=4]The size of this column is 4.[/grid_col]

[/grid_section]
`

Notice that the column sizes when added up equal 12.

Screenshots

  • Easy and simple responsive 3 column layout

Installation

  1. Upload responsive-grid-shortcode to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress and you are ready to rock!

FAQ

Where can I go if I have trouble?

You are more than welcome to post here on the WordPress forums under the plugin’s support sub-forum.

Reviews

Great work!!

This plugin is great! Easy to style using siteorigin css plugin. Works flawlessly, just what I needed.

Internal Shortcodes

Likely an easy fix but still a deal breaker. Nested shortcodes inside the grid do not resolve. For example a contact form placed inside the grid.

Easy and nice

I don’t know much of wordpress or coding but I could use the shortcode in a responsive theme template. Thank you!

Super simple and efficient

There is a lot of responsive-column-plugins out there and they all have their flaws…but this one is simple and flawless! Thanks author 🙂

Read all 4 reviews

Contributors & Developers

“Responsive Grid Shortcode” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.1

  • Fixed shortcode rendering inside grid.

1.0

  • Initial Release