Integrating Simple CSS Grid Layouts into WordPress

By . in WordPress. Updated on .

Getting a consistent, solid grid layout into WordPress can be a painless process if you use the right tools. In this tutorial, you will learn step by step how to quickly set up a grid system in WordPress that is very lightweight and easy to modify. We will keep the design simple so that we can focus on using the right tools to set up your grid, but keep in mind that you can style the grid on your own if needed.

I will be using a default Pool theme in WordPress for this tutorial just to show you a "start from scratch" approach to getting the grids just right.

Step 1: Determine Your Grid Width

Before getting started, you need to determine just how wide your grid will need to be. For my WordPress site, I can see that the width of my main column is 450px by using the Google Chrome’s " Inspect Element" feature when you right-click on an object. This is the fastest way I have found that can quickly determine the width and height of an object on a web page.

Step 2: Grid Designer

Instead of hand-building a grid, which you can do if you want, I suggest going with one of many available grid generator tools. For this tutorial, I will be using the grid generator by MindPlay. It’s a very simple and light grid generator.

I want a three-column display and I need to make sure my pixels are at 450. So adjust accordingly and skip to the "Export" tab. We will not be going over the *typography features in this tutorial, although this is certainly worth exploring on your own.

In the Export tab, use the top-most "Style Sheet" frame and scroll down until you see the "Grid" comment. You will copy everything from the comment to the bottom of this frame. It should only be about 30 lines of <pre>.

Step 3: Updating your WordPress Stylesheet

Login to your WordPress site and go to Appearance > Editor.

On the bottom-right of the Editor panel, you will see a Styles.css file (or something similar, depending upon your theme). Click this to open it up.

Scroll to the bottom of the sheet and paste your pre from MindPlay.dk:

Step 4: Implementing the Grid

To use the grid, you simply create a <div> with the class "grid". Each area of the grid is defined in the CSS. Open up a new page or post. Go to the HTML tab to start building your grid.

Here is some sample pre that you can paste into place to get you started:

<div class="grid">
	<p class="grid-m1"> </p>
	<p class="grid-c1">Left Column</p>
	<p class="grid-m2"> </p>
	<p class="grid-c2">Middle Column</p>
	<p class="grid-m3"> </p>
	<p class="grid-c3">Right Column</p>
	<p class="grid-m4"> </p>
</div>

Here’s what it looks like in WordPress:

Save/Update the page and look at the results. In my case, this is the home page for the site:

As you can see from the above screen shot, we have our three columns and everything is right where we expect it to be. You can add as many rows as you’d like by simply starting with the following <pre>:

<div class="grid">
 
	<!-- Row #1 -->
	<p class="grid-m1"></p>
	<p class="grid-c1">Left Column</p>
	<p class="grid-m2"></p>
	<p class="grid-c2">Middle Column</p>
	<p class="grid-m3"></p>
	<p class="grid-c3">Right Column</p>
	<p class="grid-m4"></p>
	 
	<!-- Row #2 -->
	<p class="grid-m1"></p>
	<p class="grid-c1">Left Row #2</p>
	<p class="grid-m2"></p>
	<p class="grid-c2">Middle Row #2</p>
	<p class="grid-m3"></p>
	<p class="grid-c3">Right Row #2</p>
	<p class="grid-m4"> </p>
 
</div>

Here’s how it looks so far:

Now you can add images or text, and style each row exactly as you’d like.

Tips for Tweaking

You may have trouble in some browsers when you have more than one row. To get around this issue, you will need to make the margin on the far right (.grid-m4, in our case) to the height you want each row to be. If you are using images that are 250px by 250px, then make the row height in the .grid-m4 to be 250px:

.grid-m4 {
	float: left;
	width: 20px;
	height: 250px;
}

This will make sure your .grid-m1 on the left side of the next row doesn’t float up to the row above it.

If you want to style the background of the entire grid, you will need to adjust the height of the .grid class. So let’s say you have four rows on your grid, each at 250px. You will want to add height to the .grid class at 1000px so any styling elements you add will cover the entire grid design.

.grid {
	width: 450px;
	height: 1000px;
	margin: auto;
}

Depending upon the version of the MindPlay.dk grid generator you use, the site may not generate the ".grid-m4" and instead you will need to use .grid-m1 after .grid-c3 to ensure your grid extends to the proper place:

<div class="grid">
	<p class="grid-m1"> </p>
	<p class="grid-c1">Left Column</p>
	<p class="grid-m2"> </p>
	<p class="grid-c2">Middle Column</p>
	<p class="grid-m3"> </p>
	<p class="grid-c3">Right Column</p>
	<p class="grid-m1"> </p>
</div>

Final Results

Here’s what my final results look like with two rows and some simple graphics:

Have fun designing and remember that you can style your grid in any way you desire.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail