Grid Shortcodes makes creating responsive markup quick and easy.
To begin, open a row:
The row will fill the full width of it’s container.
Then add in your <spanX> tags, where X is the number of columns (out of 12) you wish the cell to span.
To create two cells that are half of the row, use 2 span6 shortcodes, like so:
[span6]some content in the first cell.[/span6] [span6]some content in the second cell.[/span6]
Then close the row:
Note: Grids can go anywhere — in your header, footer, sidebars, or even inside other grids!
Customizing The Grid
Custom classes or a unique id can be easily added to any/all of the shortcodes using
[row id="custom1"] [span12 class="fancy-stuff"]oOOOooo! Aaaahhhh![/span12] [/row]
Nested grids (grids within grids), need to use unique shortcode tag names to keep the wordpress shortcode parser from breaking the nested shortcode structure.
For example, this will BREAK:
[row] [span3]on the left[/span3] [span6] [row] [span12]hi there[/span12] [/row] [/span6] [span3]on the right[/span3] [/row]
Because there is a [row] inside a [row], the first [row] will be parsed incorrectly to end at the first [/row].
To prevent this from happening, use this simple naming scheme to alter the shortcode name to make it unique for each level of depth (nesting).
[tag_x] (where x is any lowercase letter a-z).
[row] [span3]on the left[/span3] [span6] [row_a] [span12]hi there[/span12] [/row_a] [/span6] [span3]on the right[/span3] [/row]
The inner row uses [row_a] so it will not be confused with the first higher-level [row] tag.
This applies to all of the spanX tags as well.
In the example above, the [span3] shortcodes do not need to be different as they are at the same level of depth.
Wrapping Inner Content
The padding for individual span cells is fixed by the styling that creates the Grid. If the padding is increased on a spanX, it will in cause the overall span’s width to be larger and break the Grid. If you want to increase padding inside of a given span, the only way is to wrap that span’s inner content in a containing element.
Grid Shortcodes now supports a
pad attribute, which when used, will wrap that span’s inner content in a div and give it the class that you specify in that attribute like so:
[span4 pad="my-container"] some inner content [/span4]
This shortcode would produce a span4 cell that has it’s inner content wrapped with a
div with a class of
More About Inner Wrapping
- Any value of the
padattribute will activate the wrapping of the inner content.
- The applied container div that the inner content is wrapped with does not apply any kind of default styling, it just adds classes to do so with using your own CSS/LESS.
For quick activation of inner wrapping when no custom classes are needed, you can use the
pad attribute without any defined value at all like this:
[span4 pad] some inner content [/span4]
This will activate the inner wrapping and apply 2 default classes:
To use this method the attribute must be alone as shown and without the
="" — which would cause the container to have no classes assigned to it.
A Note About AUTOP (Automatic Paragraphs) For The Concerned
No need to worry about this messing up your shortcodes. You don’t need to place them all on one line, they can be broken up with new lines and tabs to your heart’s content. Whitespace at the beggining & end of each shortcode is ignored, but is preserved inside.
Here is a list of spanX shortcode tags with their corresponding widths and even number of columns where applicable:
[span1] = 1/12 ~8% - 12 columns [span2] = 1/6 ~17% - 6 columns [span3] = 1/4 25% - 4 columns [span4] = 1/3 33% - 3 columns [span5] = 5/12 ~42% [span6] = 1/2 50% - 2 columns [span7] = 7/12 ~58% [span8] = 2/3 66% [span9] = 3/4 75% [span10] = 5/6 ~83% [span11] = 11/12 ~92% [span12] = 1/1 100% - 1 column