top of page

Website Design Grids: 5 Key Terms You Need to Know

There are many important considerations to be made when it comes to designing an effective website for business. The aesthetics, for example, define a company’s brand and attract visitors, while the functionality of the design is what lets people find what they need and eventually convert to a customer.

To make sure that your website is both appealing and functional, a web designer often uses grids in the web design process. A grid is composed of vertical and horizontal guidelines that organize different web design elements to create a cohesive structure. Basically, it functions as the skeleton for a given website.

It’s an important aspect of web design that has a profound impact on the final result. In order for you to get it right, however, you need to familiarize yourself with certain key terminologies. Here’s a guide to help you out:

1. Unit

A unit, which is considered to be the basic building block of grids, is a rectangle formed by a series of horizontal and vertical lines. Multiple units comprise the entire grid. They usually serve as guiding lines that divide an entire website layout into equal parts.

2. Gutter

Gutters are essentially blank areas between different units. Gutters can be customized with CSS to drastically alter the appearance of the website, as these negative spaces can be used to great effect to bring attention to certain elements or provide a sense of order to the entire design.

3. Column

Units and gutters combined are what form a column. They function as a container or space where you can put your content, such as images, blocks of text, buttons, and so on.

You can customize the dimensions of columns, depending on what you need or prefer. Sometimes, a web designer would make a significantly large column to emphasize a particular element.

4. Field

When you create content in columns, they form horizontal divisions on your page called fields. A field is used to group related data jointly in a tight interface. Some web designers build fields with equal height throughout the page to achieve an organized and balanced layout. However, creating fields of the same height is not always necessary.

5. Rule of Thirds

The “rule of thirds” is mostly practiced in photography and cinematography. However, this can also be applied to web design. Through this rule, web designers place content on lines that divide content into thirds to create a more pleasing and appealing look.

However, you should know that not all content on your website should strictly follow this rule. It is more of a guideline that should be used when it makes sense to do so.


To attract more visitors to your website, you should make your web design appear seamless, cohesive, and organized. With the use of grids, you can achieve such a result. Grids are composed of various smaller elements, such as units, gutters, columns, and fields. When combined, all of this gives your web design a well-balanced structure that looks great and functions effectively.

If you are looking for an expert website designer in Athens, GA, get in touch with us today. We are a web design agency that helps our clients shape their online presence through web design. Contact us for a free consultation!

Sales Hook Method Web Design Book


bottom of page