Grid Shortcode

Function: Grid shortcode is used to align content in a grid pattern.

Note: It is best practice to keep the number of columns in a given row to a reasonable number, typically three. The more columns you put in a row, the more cramped your content will be. Additionally, not all page formats (Ex. pages with side bars versus pages without side bars) will support having several columns in a given row as there isn’t enough space on the page.

*This recipe is displayed on a no sidebar page due to the nature of one of the options you can choose for grid shortcode.

Step 1: Have the content that you wish to put in a grid pattern

Again, you can really put anything into a grid pattern using the grid shortcode. For the purposes of this tutorial, we will be using cards. Go to the cards recipe for the shortcodes and tutorial. The following is how cards would appear to your external user before adding in the grid shortcode to put the content in a grid pattern. Notice how they expand to fill the entire width of the page.

Step 2: Put your content into the grid shortcode framework

Think of grid shortcode as a framework. For every row you want, begin it with [row] followed by [col class="col-sm"]. After inserting your content you then want to close the column with [/col] before starting a new column with [col class="col-sm"]. When you are done putting content in your particular row close it all off with [/row]. Repeat the process until all of your desired content is in your desired grid pattern.

Remember, do not overload a row with columns. You can always add another row to accommodate your content.

The grid shortcode without content appears as follows:

[row]

[col class="col-sm"]

*CONTENT*

[/col]

[col class="col-sm"]

*CONTENT*

[/col]

[/row] [row]

[col class="col-sm"]

*CONTENT*

[/col]

[col class="col-sm"]

*CONTENT*

[/col]

[/row]

This is what it would look like with card shortcode inserted:

[row]

[col class="col-sm"]

[uw_card style="inset" color="gold" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Something goes here…[/uw_card]

[/col]

[col class="col-sm"]

[uw_card style="inset" color="purple" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/uw_card]

[/col]

[/row] [row]

[col class="col-sm"]

[uw_card style="inset" color="white" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Something goes here…[/uw_card]

[/col]

[col class="col-sm"]

[uw_card style="inset" color="gold" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Something goes here…[/uw_card]

[/col]

[/row]

 

Here’s what it would look like to your external users:

Step 3 (Optional): Aligning the bottoms of your content

You may have noticed up above at the end of Step 2 that the heights of the cards are not all even. To achieve this add the attribute height=equal to the insides of all your [row] [/row] codes.

Attribute code: height=equal

Before

[row]

[/row]

 

After

[row height=equal]

[/row]

 

By adding this, your cards will now look like this:

 

Step 4 (Optional): Additional attributes available for Grid Shortcode

Want to get fancier with your grid shortcode? The following attributes are ways that you can customize your grid shortcode even more. Just like in Step 3, the corresponding attribute for each of the below options should be added within the brackets of the row you want to implement the attribute. (This is with the exception of the id attribute, which can be applied to both rows and columns.) You can have multiple attributes in any given [row] [/row] depending on your needs. This will be important for some of the available style attributes.

Attributes available for Grid Shortcode

• height: To make the bottoms of your content, such as cards, line up use height=equal as laid out in Step 3 above.
• background: This will change the color of the background of the row you’ve implemented it on. The currently available options are gold, purple, gray and light-gray. Please see the color background options section below for visual examples.
• image: This attribute sets an image as the background of whatever you’ve put into grid shortcode. Please see the image background option section below for further details.
• width: To make the containers within your grid shortcode expand to the full width of your page, use width=full-width. Please note that there are additional guidances for this particular grid shortcode modification in the full-width option section.
• id: IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.

Example of how to implement one of the color backgrounds in a row

Before

[row]

[/row]

 

After

[row background=purple]

[/row]

 

Color Background Options

Color options: purple, gold, gray, light-gray

Attribute code: background=Insert color option here

Notice that for some of the colors the text automatically changes color to create an accessible reading experience for the text. This is also how you would go about changing the text color if using the image background attribute and your text is hard to read in the standard black.

 

 

 

Image Background Option

Attribute code: image=insert image URL

This attribute sets an image as the background of whatever you’ve put into grid shortcode. Recommended image size is 1920px x 1280px.

*As said previously, use the background color attribute in tandem with this attribute code to change text color if needed.

 

 

Full-Width Option

Attribute code: width=full-width

Only use this on a page with no sidebar, you will have strange results otherwise. With this option, you’ll notice that the containers span the full-width of the screen, thus allowing whatever is in the containers to do so. Insert this attribute into the [row][/row] code just as you would do with the color background and the image background.

Before

[row]

[/row]

 

After

[row width=full-width]

[/row]

Both the color background option and/or the image background option can be used with the full-width option, essentially creating a shortcode version of the flexible media blocks in storytelling modules.

*Because this causes your content to go full-width, you may get undesired results like in Example 2 below. To resolve this, you’ll need to add padding around whatever content you may have in a given container. This is done by changing the column class to “p-5” like you see below.

Before

[col class="col-sm"]

[/col]

 

After

[col class="col-sm p-5"]

[/col]

 

Example 1:

 

Example 2:

 

Example 3 (after adding in padding to Example 2):

 

Needing more assistance? Check out the resource below for more information on how Bootstrap works and how it can be modified. (Due to the fact that the grid shortcode is essentially bootstrap, the attributes and modifications for Bootstrap should work with this shortcode.)

Bootstrap resource

Back to top