A Simple CSS Grid for your WordPress Theme

A Cascading Style Sheet (CSS) Grid is a structure that helps designers lay out columns of content on their web pages. Several premium WordPress themes have CSS grid capabilities built-in. If your theme does not, this tutorial will demonstrate how to add this capability which will be accessed by using a simple set of shortcodes.

Some WordPress themes are built from the ground up to support a CSS grid. Their underlying template files are designed to accommodate a particular grid structure. However, this article is about inserting a simple grid into your existing theme on an as-needed basis. In particular we will be creating a narrow grid so as to have it fit within the main content area of themes that may also have sidebars to contend with.

Grids can be fluid or fixed. A fluid grid expands to fill the dimensions of it’s larger container. Fluid grids can be more challenging to design for simply because you cannot predict the size of the content area. Designers often prefer to have a specific graphical template with known dimensions. This makes a fixed grid a popular choice amongst designers and is what we will be creating in this tutorial.

Understanding CSS Grids

If you are unfamiliar with what a CSS grid actually is, think of it simply as a way to present your content in an arbitrary number of columns. The grid itself has a specific number of columns which for the purposes of this article we will call grid columns.

As you can see from the image below, the grid that we will be building is 526 pixels wide and consists of 6 grid columns. Each column is 66 pixels wide and there is a 26 pixel wide gutter between them.

The grid columns are an underlying structure and you do not have to layout your content in the same number of columns. Content columns are able to be as narrow as a single grid column or as wide as all of the grid columns in a single row.

The image below demonstrates 5 different content column widths on our 526 pixel grid. We can also use a single content column that spans all of the grid columns.

We can use any number of content columns spanning any number of grid columns as long as they add up to the number grid columns there are. In our grid that means we must define our content columns in each row to add up to a total of 6 grid columns. We can mix and match these as we require.

The Simpler CSS Grid

There are many different ways to build a CSS grid. One of the most popular approaches is to use the 960 grid system. It has been used by Sony Music, the Fedora Project, the American Institute of Architects and several other high profile organizations.

The Web Designer Wall published an article in which they expressed that they felt the 960 grid system was becoming somewhat dated. Specifically :

  • The gutter space was too narrow for modern design.
  • The left and right margins could be removed altogether.
  • Fewer classes could be used.

In response to their realization they designed and released The Simpler CSS Grid. This 978 pixel grid addressed their aforementioned concerns.

The grid system in this tutorial was inspired by the Simpler CSS Grid. A few changes have been made which makes it more suitable for embedding into a narrow content area as we require.

  • The auto margin (centering) has been removed to keep the grid aligned with the left edge of the content area.
  • The number of columns has been reduced to 6.
  • The size of the columns has been increased from 54 to 66 pixels.
  • The size of the gutter has been decreased slightly from 30 to 26 pixels.
  • The overall width of the grid has shrunk to 526 pixels.
  • The classes have been renamed in an attempt to avoid any potential conflicts with other style components within WordPress.

Adding the styles and functions to your theme

We will need to define the styles for the grid as well as the shortcode functions that utilize these styles. Add the following code to your theme’s style.css file.

/* My CSS Grid */
.mygridcontainer {width: 526px; margin: 0 0 10px 0;}

.mygrid1, .mygrid2, .mygrid3, .mygrid4, .mygrid5 {
	float: left;
	display: inline;
	margin-left: 26px;
}

.mygrid1 {width: 66px;}
.mygrid2 {width: 158px;}
.mygrid3 {width: 250px;}
.mygrid4 {width: 342px;}
.mygrid5 {width: 434px;}
.myfirst {margin-left: 0;clear: left;}

/* clearfix */
.myclearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .myclearfix {
	zoom: 1;
} /* IE6 */

*:first-child html .myclearfix {
	zoom: 1;
}

The next step is to create a set of shortcodes that we can use within our pages and posts that will enable us to implement the grid system. Add the following code to your theme’s functions.php file.

function mygrid($atts, $content = null) {  
	return '<div class="mygridcontainer myclearfix">'.do_shortcode($content).'</div>'; 
}
add_shortcode( 'mygrid', 'mygrid' );

function mygrid1($atts, $content = null) {  
	return '<div class="mygrid1">'.$content.'</div>';
}
add_shortcode( 'mygrid1', 'mygrid1' );

function mygrid1first($atts, $content = null) {  
	return '<div class="mygrid1 myfirst">'.$content.'</div>';
}
add_shortcode( 'mygrid1first', 'mygrid1first' );

function mygrid2($atts, $content = null) {  
	return '<div class="mygrid2">'.$content.'</div>';
}
add_shortcode( 'mygrid2', 'mygrid2' );

function mygrid2first($atts, $content = null) {  
	return '<div class="mygrid2 myfirst">'.$content.'</div>';
}
add_shortcode( 'mygrid2first', 'mygrid2first' );

function mygrid3($atts, $content = null) {  
	return '<div class="mygrid3">'.$content.'</div>';
}
add_shortcode( 'mygrid3', 'mygrid3' );

function mygrid3first($atts, $content = null) {  
	return '<div class="mygrid3 myfirst">'.$content.'</div>';
}
add_shortcode( 'mygrid3first', 'mygrid3first' );

function mygrid4($atts, $content = null) {  
	return '<div class="mygrid4">'.$content.'</div>';
}
add_shortcode( 'mygrid4', 'mygrid4' );

function mygrid4first($atts, $content = null) {  
	return '<div class="mygrid4 myfirst">'.$content.'</div>';
}
add_shortcode( 'mygrid4first', 'mygrid4first' );

function mygrid5($atts, $content = null) {  
	return '<div class="mygrid5">'.$content.'</div>';
}
add_shortcode( 'mygrid5', 'mygrid5' );

function mygrid5first($atts, $content = null) {  
	return '<div class="mygrid5 myfirst">'.$content.'</div>';
}
add_shortcode( 'mygrid5first', 'mygrid5first' );

The CSS Grid Shortcodes

Accessing our new grid system in your posts and pages is as easy as using some of the shortcodes we defined above. You must wrap your entire grid within the mygrid shortcode tags as below.

[mygrid][/mygrid]

There is a shortcode defined for each of the content column widths that the grid system supports. This includes mygrid1, mygrid2, mygrid3, mygrid4 and mygrid5.

You may have noticed that there is no mygrid6. It is not required because if you wish to use a single content column that spans the width of all 6 grid columns, you do not need to break this up into smaller columns. In effect you already begin with a grid6 content column by default without having to specify one.

The first content column you define for each row must use a special version of the shortcode for the column width you intend to use. The first shortcode versions are defined like so : mygrid1first, mygrid2first, mygrid3first, mygrid4first and mygrid5first. The purpose of these particular versions of the shortcodes is to remove the left margin from the content column. All of the remaining content columns in the row will have left margins.

Examples of using the Grid

Below is a simple demonstration of creating 3 content columns using our new grid. Each of the content columns is two grid columns in width. To keep things simple with the example source code below, the actual content of the columns has been removed.

[mygrid]
[mygrid2first][/mygrid2first][mygrid2][/mygrid2][mygrid2][/mygrid2]
[/mygrid]

This is the first content column.
This is the second content column.
This is the third content column.

Notice there is no carriage return or line break until the row is complete. Each row in your grid must be on it’s own distinct line.

The light blue background columns represent our underlying grid. They have been added for illustration purposes only and would not show up in normal use of the grid. As you can see, our three content columns have been laid out across the entire width of our grid.

Here is a more extensive demonstration that adds an additional row of content columns to the above example. Two content columns have been added to the second row. The first content column is 5 grid columns wide and the second is only a single grid column in width. This time the actual content for the various columns has been included in the source code so you can see how it all fits together.

[mygrid]
[mygrid2first]This is the <strong>first</strong> content column.[/mygrid2first][mygrid2]This is the <strong>second</strong> content column.[/mygrid2][mygrid2]This is the <strong>third</strong> content column.[/mygrid2]
[mygrid5first]<h2>Grid headline</h2>This is the <strong>fourth</strong> and widest content column. It stretches to fill 5 grid columns in total.[/mygrid5first][mygrid1]This is the <strong>fifth</strong> content column.[/mygrid1]
[/mygrid]

This is the first content column.
This is the second content column.
This is the third content column.


Grid headline

This is the fourth and widest content column. It stretches to fill 5 grid columns in total.

This is the fifth content column.

Using Images in your Grid

CSS grids are convenient ways to present images or generally any type of content. Below we have two different sizes of robot images. The smaller robots each fit inside a single grid column. The larger robot will not fit within a single grid column but it does fit comfortably inside two grid columns.



As a final example of using our grid we will mix both text and images to demonstrate the flexibility of our grid system. We will also remove the background image of the grid, as you wouldn’t be using it unless you were in the designing phase.

The first content column contains only text and is 3 grid columns in width. Next we create a content column for the larger robot that is two grid columns wide followed by a content column for the smaller robot that is a single grid column in width.

Mixed Content Grid Example
This first column spans 3 grid columns in total. The larger robot spans two grid columns, and the small robot spans one grid column. 3 + 2 + 1 = 6 grid columns in total.

The underlying grid image

The light blue grid image that is used in the various examples above is for design purposes only. It helps the designer visualize the various grid columns.

Adding the grid background image to your grid is easy. Simply wrap the grid with a div tag that has the background image specified and repeated along the Y axis. Here is the code below :

<div style="background-image:url('grid-background.png');background-repeat:repeat-y;">[mygrid] grid content [/mygrid]</div>

You would need to replace the grid-background.png filename with the full URL to the grid background image file. For your designing convenience, below is the full grid background image file used in this tutorial. Right click on the image and select Save Image As to download.

grid background

Conclusion

I hope this tutorial has helped those who are new to CSS grids understand them a little better. CSS Grids are a convenient way to layout content.

We looked at an interesting alternative to the 960 grid system : The Simpler CSS grid. We then implemented a modified version of this grid into a WordPress theme with a series of shortcodes and provided a few examples of using the grid system.

More in Wordpress (1 of 3 articles)
Stopwatch.


Enhancing the performance of your Wordpress site is important to your site visitors as well as to the search engines. ...