12-column grids, is it good for responsive web design?

web design using 12-column grid structure

12-column grid layout is one of the popular grid structured in web development. in this article I’m going to discuss how you can use this layout to develop responsive websites.

I’ll start the article with a brief introduction and some examples for 12-column structures for FHD and 1440px displays. 

Then I’ll discuss why developers prefer this structure and how you can use 12-column structure for your web development projects. I’ve added some pro tips too. 

To provide a broad idea about 12-column layout, I added some images in this article. Moreover, I will guide you how to choose margins in this layout.

So, keep reading.

What is a 12-column grid?

A 12-column grid is a very common web development layout strategy that helps web developers to develop a unified and well-organized website layout.

Grid layouts are quite popular among web developers due to many reasons. 

By the way, I have already written an article about what is a grid website structure and do web projects need it. It includes everything about the importance of grid structures in web projects. 

In this 12-column method, the web page is divided into 12 equal columns. So, we can position and align items on the webpage easily.

Another fact that I value most is, this 12-column grid layout helps me to make responsive designs in no time. More importantly, you can find plenty of pre-built 12-column grid classes and styles in CSS frameworks like Bootstrap.

A sketch of 12-column grid layout for a web page
Structure of the 12-column grid layout for webpages

12-column grid for 1980 x 1080 (Full HD Display)

Let me discuss how you can use the 12-column grid layout for the web projects targeting Full HD displays.

Using this layout, designers can guarantee that all items on the homepage are correctly aligned and ordered.

Apart from that, I could save a lot of hours when adjusting the design for mobile devices. Since, within a couple of minutes, I can rearrange the columns and make the overall design responsive.

Well, I’ll explain more. First, have a look at the following figure which shows an example of a 12-grid structure with pixel values.

A sketch of 12-column grid layout for a FHD
Column width, gutter, and margin values for a 12-column webpage layout for full HD display

As shown in the figure the pixel values are as follows.

If you calculate the total width of the above section, it is 1980px. Which is the width of a full HD display.

12-column grid for 1440px

The following figure shows an example of a 12-grid structure for a 1440px screen.

A sketch of 12-column grid layout for a 1440px
Column width, gutter, and margin values for a 12-column webpage layout for 1440px display

As shown in the figure, the column width, gutter, and margin are 107px, 12px, and 12px respectively.

Why do people use a 12-column layout?

Consistency and organization

Since there are columns in this grid structure, we can easily align the photos, text, and buttons on a web page. So we can maintain consistency throughout the website.

Responsiveness

We can easily arrange the columns in this layout and make the design responsive to different screen sizes.

The following figure is an example that shows how you can rearrange the columns to make a responsive design.

2-column, 3-column, and 4-column grid structures derived from a 12-grid layout
2-column, 3-column, and 4-column grid structures derived from a 12-grid layout

The following diagrams show how you can rearrange the columns to match different devices.

The structure of the desktop version of the design (12-columns grid)
The desktop version of the design (12-columns grid)

Now, we can rearrange the columns as a 6-column layout as below. Then the design match with tablets.

Tablet version of the design (6-columns)
Tablet version of the design (6-columns)

Similarly, you can rearrange the design as 3 column layout and make the design match mobile phones.

Mobile version of the design (3-columns)
Mobile version of the design (3-columns)

Simple to use

In my opinion, even beginners can use this grid layout to design consistent and responsive websites.

More importantly, you can find pre-built classes and styles for 12-grid layouts in Bootstrap and Bulma.

How to use 12-column grid (Tips from pros)

I and my colleagues have been using 12-grid layouts for a number of years now. So, I’ll give you some tips and tricks that we are using when developing websites.

An example of nesting in grid layouts
An example of nesting in grid layouts

How much margin do I need for a 12-column grid?

Usually, I use a 15px – 20px margin. However, the specific design and layout of your website will determine how much margin is required for a 12-column grid.

One important thing to consider is, the margin must be large enough to clearly note the columns and page elements, but not so large as to distract the overall design and readability of the page.

As I described in the previous topic, I always recommend using media queries that will adapt margins to different screen sizes.

Balancing whitespace during web design 12-column grid

Balancing the white space in a web page is very crucial. Because it can impact on the overall appearance as well as the readability.

Besides, it helps the users to relax and pause while scrolling down the page, which makes a better user experience.

Conclusion

In conclusion, a 12-column grid is an effective web development technique that may support developing well-organized websites.

In addition, it assures responsiveness by rearranging columns to match different resolutions.

However, you should keep in mind that the things I discussed above are not the final solutions for the rapidly changing mobile world. So, we all have to keep track of the industry and new trends in web development.