Understanding CSS Grids for Modern WordPress Website Design

With responsive design now no longer optional, CSS grids are quickly becoming the go-to for creating consistent website layouts that look great on multiple devices.

In a nutshell, CSS grids provide a quick way to scaffold a site. You know all those floats and absolute and fixed positioning properties we’ve been using? Yeah, those are becoming outdated as CSS evolves.

CSS3 grids make creating and changing sites a snap. In today’s post, I’ll show you how they work, why you should use them and how to code your own grids for custom layouts.

What is a CSS Grid System?

Before you start creating your new layout, there are a few things you need to know first. Namely, how grids come together to form a layout and which browsers will support it.

To create layouts, it all starts with a grid. Inside your basic grid are rows, columns, cells, tracks, lines, and areas. There are also grid items which are basically the content you’re placing inside your grid.

If you decide to create a child grid layout, it’s also called a grid item.

If it sounds like grids are just fancy HTML tables, it’s because in a small way they kind of are since there are a lot of similarities between the two. The biggest difference is that there are specific and powerful properties available with CSS grids, but we’ll get into that a bit later on.

Rows, columns, and cells mean the same thing for CSS grids as with HTML tables. Tracks are basically what you call an entire row or column and an area is a combination of cells that form a rectangular shaped content container, while grid lines are the area and cell walls of the layout, similar to the border of an HTML table.

Areas are what form the different layout sections you want to use such as the header, sidebars, main content area and footer.

By defining these areas with the new CSS code available, you can create and style your layout that’s quick to create like HTML tables, but easier move around if you decide to switch things up later on.

The only catch is the new CSS code isn’t yet fully compatible across all browsers, but the way things are headed it’s likely the new CSS grid system is going to be the norm and become best practice. This means that it’s only a matter of time before all major browsers are going to be fully compatible with the updated CSS.

That being said, there is a polyfill by François Remy available on GitHub that you can use with cross-browser support so you can start experimenting with grids right away.

In Chrome, you can also enable the experimental web platform in a few clicks to give grids a test drive as well. To do this, start by loading the additional secret options menu by going to the URL below:

Scroll down to the Enable experimental Web Platform features section, then click the Enable link below the title.

Next, click the Relaunch Now button that appears and that’s it. You’re now ready to experiment with CSS grids within Chrome for Mac, Windows, Linux and Android devices.

Setting Up Your Grids with HTML5

Now that you have your testing tools enabled, you can start coding your grid layout. Similar to regular CSS, you need a page to display any CSS code you write.

Backup a copy of your page.php file or any other WordPress page file you want to experiment with and place it somewhere for safe keeping. Now you’re ready to add the basic HTML5 code needed to display any grids you end up creating later on.

We’re going to create areas for a header, footer, content area and a sidebar on the right-hand side.

To do this, you can place the following code into your page:

You can optionally add content to each section if you would like to actively see where grid areas appear once you have finished coding them.

Adding to Your Grids With CSS

Before we dive right in and start coding, it’s important to note there are a few regular CSS properties that don’t work with grids:

• column-* – Where * is an extension of the property such as column-span, column-width and column-rule to name only a few.
• float – The only time the float attribute works is if you apply it before a grid item such as for the display property which shows the grid. You won’t be able to float content inside the grid.
• clear – Once you’re working with grid layouts, you won’t need to worry about clearing any floats since grids ignore that property.
• vertical-align – This property won’t have an effect on your grid layout.
• ::first-line and ::first-letter – These pseudo-elements don’t apply to grid containers, which are the elements all of your content, cells and areas are held in, similar to content containers.

All other CSS rules that aren’t on this list still apply.

Since that’s all out of the way, backup your style.css file then add in your grids. Start by calling your grid ID and using the grid property as shown in the example below.

If you find you build your layout and the positioning doesn’t look right, try changing this property to display:inline-grid instead since it should produce your layout inside the area you’re working in rather than creating a container in the regular CSS block property level.

A grid has been created, but it’s empty, which isn’t all that exciting.

To create cells, we can use grid-template-rows and grid-template-columns, placing them underneath the display property that’s already defined. The values you can enter for them are the sizes of the cells you want to create.

For example, defining one size for a row creates only one row whereas typing five sizes creates five rows. The same principle applies to columns.

To create the layout proposed above, the rows and columns can be defined as outlined below:

In this example, three rows and nine columns were added.

The first row is 100 pixels in height, the second adjusts automatically to the amount of content that’s added relative to the grid. This is a great way to add a main content area. The third row is also 100 pixels in height.

The repeat function lets you create any number of columns or rows as long as you want them all to be the same size. In this case, nine columns were created with each of them being 100 pixels in width.

This may seem like a random number of columns to add, especially if there are only five different areas in the previously planned layout, but since we can set areas to span across multiple cells, we can effectively set the default size of an area.

In this example, within one row, the main content area could span across seven columns for a default width of 700 pixels and the sidebar could span across two columns for a width of 200 pixels. That equals to nine columns of 100 pixels each or 900 pixels in total.

The reason why fewer columns weren’t defined in a larger size is that later on, more areas could be added that require less space. For example, you could add a logo area in the header on the left-hand side that only requires a single row and two columns. You could also add a copyright section in the footer in the same way.

This idea also applies for rows, but I decided to use a fewer number of them just to show you the different ways you can plan out, size and display your grid layout.

So far things aren’t looking at all like the plan, but once the grid areas are defined and named, the layout starts coming together.

To name the areas, you need to list each of them in relation to the number of rows and columns you already defined. You can do this by using the grid-template-areas property, then adding your names in quotations for each row in the order that they should appear on the grid.

Add your names to your grid element underneath the properties you just added.

Each column in the first row has been named as one area similar to the third row. The second row includes the main content area and the sidebar.

Even though we named the cells to make it easier to add content to them later, the grid areas haven’t yet been created.

Since we already named classes for the areas we want to create in our page file, we can now define where those areas begin and end in our grid by using the grid-row-start, grid-row-end, grid-column-start and grid-column-end properties. We can add them right after our main grid code.

Areas are counted from the start of the first grid line to the end of the next grid line. Even if you haven’t added an extra column or row, pretend it’s there and end the area there otherwise, your row or column could start and finish in the same place, meaning no content could be displayed.

With that, your basic grid is set up and you can start adding content and styling. The only trouble is it won’t be at all responsive for mobile devices.

Making Your Layout Responsive

According to Smart Insights, over half of the time spent online in the US in the first half of 2015 was on mobile devices. That’s 11% more than the previous year and 39% more than in 2008.

The number of hours being spent on mobile devices is steadily on the rise and if you’re not keeping up, you may just be left behind altogether.

It can seem like an overwhelming task to accomplish, but it doesn’t have to seem that way. There are two main ways you can make your grid layout responsive and they’re not overly complicated, especially once you know how to make it happen.

You can also use them in tandem to get an even greater result and they are the @media and max-width properties which let the visitor’s browser know how to view the content if a mobile device is being used to view your site.

With the @media property, you can define specific styles for your site that correspond to mobile screens. If the specified mobile device is being used to view your site, your site adjusts to the styles you entered for it.

Normally, the max-width option allows your layout, element or container to adhere to the size you choose by setting a maximum width of the area which content is allowed to occupy. This tells your site it can let the content areas get smaller and bigger, but as long it doesn’t go any larger than the value you define.

With the @media rule, max-width takes on a new meaning: The styles you enter apply to all screen types you previously entered such as for mobile devices, as long as the device’s screen size isn’t larger than the amount you entered.

If the screen is larger than the max-width amount, then the styling won’t apply.

Similarly, you can also define which screens display your styles using the min-width property to ensure your site displays your styling only to screens that are at least the size of the value you enter.

Both options are used to ensure your site displays its content in the most user-friendly way for various devices with different screen sizes.

Above the first block of CSS you added to your stylesheet, add one extra line, similar to the example below:

Don’t forget to adjust the numeric values to whatever widths suit your specific needs.

Easy Layout Changes

Now it’s about putting it all together and adding even more to your new layout. Your completed stylesheet for your grid layout should end up looking similar to this:

And here’s a better visual of what it would look like on the front-end:

If at any point, you want to update your layout to get with the times, you would only need to redefine your areas by changing where they start and end to rearrange them in any way you see fit.

Your content should automatically switch to the new location without having to redo your entire theme layout. Pretty cool, right?

There are also advanced techniques you can use to add further functionality to your new layout and you can find them on The Property Index at W3C’s website.

Just as you would probably expect, you can use standard CSS to punch up your layout on the fly and give it some color and style as you normally would for your themes.

Wrapping Up

Now you’re ready and up-to-date for the latest advancements in CSS. You can create and understand the different and new elements that come together to form a grid layout.

What’s next? Keeping an eye on the W3C working document for grids to make sure you’re aware of new changes as they roll out.

What do you think of the new CSS3 grid layout? Could you see yourself using it in the future? Do you think it can save you loads of time? Share your thoughts in the comments below.

Tags:

• CSS