Every web page is made up of squares and rectangles. And they are located within an encompassing grid layout. These squares and rectangles:
- Organize the content on the page
- Create alignment and order
- Create the basic structure of the user interface
A grid system is a structure of invisible lines and columns to the user that hold elements and contents of a design of a webpage together. They provide designs with a consistent rhythm and limit decision-making.
They are made up of
- Columns
- Rows
- Gutters
- Modules
- Margins
Columns
- 12 on desktop,
- 8 on a tablet, and
- 4 on mobile.
Most grids have 60–80px column widths.
Gutter
Gutters are the negative space between columns. Common gutter size is 20px.
Modules or content modules
The intersection of rows and columns creates units of space. Each design element (text, images, buttons, etc.) fit into modules.
Margin
The margin is the negative space between the outside column’s edge and the frame.
Types of Grids
Block grids
Block grids are the simplest grid structure, a large rectangular area taking up most of the space inside a format. They consist of a single column that can either include one element or multiple elements arranged vertically, surrounded by margins. They are used for continuous blocks of text or large, full-width images, such as cover or hero images.
Column grid: divided-yet-equal
Column grids are the most common grid used by graphic and web designers. They are composed of several columns, primarily used to organize multiple elements into columns.
Traditionally, the column width in a design system does not change, but the number of columns does, from 12 on a desktop, to 8 on a tablet and to 4 on mobile. Column grids can have as few as two columns, with no absolute limit to how many there can be.
Modular grid: perfect symmetry
It helps present multiple items simultaneously for easy access when there are multiple elements to organize in web design. Mobile phone home screens that display the entire collection of apps or e-commerce websites that display collections of inventories in their category pages are common use cases for modular grids.
Hierarchical grids
Hierarchical grids are also described as “freestyle,” whose elements are placed “spontaneously” among the grid’s columns and rows. This refers to any irregular grid that accommodates specific con
Baseline grids
Baseline grids are used to set the leading from one line of text to the next for consistency. These are easier to organize, create vertical rhythm, and are aesthetically pleasing. A sheet of ruled paper, like you, probably used at school, is a simple example of a baseline grid.
The importance of grids
Grids help shape and organize web design. You would not know where to put your design elements if you did not have them. We need them to create a good user experience so that a user can navigate a website and find what they need. Grids are also helpful in responsive design. While a landing page’s desktop experience may use multiple columns to span text and images across, the design must be flexible enough to condense down to 2–3 columns on a tablet and 1 column on a mobile device. The mobile grid stacks like a 1 column modular grid.
Guidelines for using grids
Now, let’s cover how to use grids in web design.
Before you begin designing, consider the grid
Create a grid for your landing page after you have done your research and maybe even some low-fidelity wireframing on paper. It’s a one-step process. Once completed, you won’t have to think about it again for all subsequent landing pages. Consider the grid before you begin designing, rather than leaving it until the end and attempting to fit your design into a grid. When necessary, do not be afraid to deviate from the grid. New designers may feel constrained by using a grid, but they should not. It’s OK to break your grid after you’ve created it!
Don’t be afraid of blank space
In web design, it is critical to balance whitespace and negative space. Don’t feel obligated to fill every available space on a landing page design. Consider using large margins and healthy spacing between sections of content to give your user a chance to breathe and pause as they scroll through your website.
Consider using the 960-grid system
The 960 Grid System is an attempt to simplify web development workflow by providing commonly used dimensions based on a 960-pixel width. There are two options: 12 columns or 16 columns.
The 960 grid is organized as follows:
- The overall width is 960px.
- Use a maximum of 12 columns, each 60px wide.
- For a total gutter spacing of 20px, use 10px spacing to the left and right of each column.
- 940px is the total content area.
The 12-column grid system provides a great deal of flexibility. Here’s an example of how the 12-column grid can be used to add content to a 3-column layout. The more you use a grid, the more you’ll realize it’s a guide that can help you design better and faster.
Final thoughts
Pay attention to the underlying grid as you browse the internet, whether paying a utility bill or scrolling through social media. What type of grid is the designer employing? Have they used it to create the experience? The more you observe how content is organized on various websites, the more you’ll notice how successful or unsuccessful a grid is. Observe and apply what you have learned to create better website designs.
