Please, enter a valid email!

Grid Approach in Web Design: Pros and Cons

Many of the web pages we see today use a grid for optimizing web layouts. Usually that is an invisible or subtle structure that guides the placement of the page elements determining the margins of the piece and space between page elements. And even though web designers have been slow to embrace the grid concept, now they are increasingly turning to grids, and even more explicit grid-based forms, to control the structure of web pages.

In modern web design the use of grids is very much obliged to the modern typographic grid that became associated with the International Typographic Style of the 1950’s. At that time a number of graphic designers began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was that grids came into public awareness; however they have in fact long been used extensively in other design mediums.

The grid is used to structure content. It serves as the framework for page layout dividing the page horizontally and vertically into columns and rows to order the elements of the design in literally a grid of X and Y pixels. The elements are then placed on the cell border lines and overall aligned on horizontal and vertical lines, and items of equal hierarchical importance reside within columns of the same width. So when you’re designing a website that needs to follow the normal visual design standards, that’s a grid which is considered as a first priority to align all visual objects on the web page.

Now that we’ve covered the basics of grids, let’s explore the evident advantages and disadvantages of using the grids. As for the advantages (+) of the grid-based system being applied to web design, we should mention the following:

  • the grid through organizing a massive content into evenly distributed columns and rows makes a compact arrangement with its own visual rhythm. Such consistent guidance allows users to easily follow the layout, develop familiarity with a project and rapidly absorb the information;
  • besides, the layouts that have adapted the grid style do not feel chaotic or somehow messy, but look clean, structured, readily intelligible and streamlined. Grid structures the content so that the viewer can easily assimilate and retain it;
  • at the same time grid offers a certain level of stability to the structure of web design that establishes visual unity and cohesiveness throughout a series of related pieces. This means that web developers, by following an existing framework, have a logical and usable structure on which they can build the website;

  • additionally, grids can be helpful in achieving balance and adequate width and horizontal spacing of each column. The grid determines many decisions regarding structure of the text, illustrative material, and the overall layout. It gives dominance over the elements without making the page too crowded or overbearing;
  • plus it can facilitate the content successive updates while there’s a specific place to replenish the content. And moreover it’s easier to adopt the design if there’s a need to move the content or navigation right or left;
  • through varying the amounts of text and imaging, grids can offer a variety of creative design options taking on different visual lives, so they’re highly flexibility within a framework;
  • in a grid the elements work in relation to each other, meaning that even white space doesn’t feel like an empty void, since it’s in alignment with the solids;
  • in case web designer is dealing with the content that varies greatly and some pieces require a more complex arrangement, it is possible to use mixed grid systems within the web page, for example unite modular and column grids;
  • more advanced grid systems can be made with complex geometry, contain multiple layers, and be three-dimensional or even organic;

Obviously, we should define a range of counterarguments and disadvantages (-) that somehow deny the usage of grids as being applicable to web design:

  • some people claim that grids cause web designers to be less creative. As if a grid stifles creativity and makes them feel like they’re trapped within its borders, as if they cannot push the visual style to the experimental edges;
  • also grids have been accused of creating boring, static designs. Some people believe that a grid only works in a fixed layout;
  • the layouts based on grids are not appropriate in all cases and sometime cannot satisfy a specific web design aesthetic;
  • grids can feel stifling and may limit the design by forcing it to be constrained and even confined, without any potential elasticity and scalability of some or all elements. However their restrictive nature is being constantly argued;
  • if there’s a complex and heavy content to be displayed, the overly complicated grid units and their congestion can destroy the underlying unity that the grid provides, and create visual clutter in design workspace;
  • since the vertical dimensions of all elements in the grid adhere to multiples of a specific value, it can be highly restrictive when imagery and other components are thrown into the mix;
  • frequently people may be confused that a design utilizing a grid should look grid-like, giving a clear indication of columns.

Though now the concept of grid-based design is taking hold on the web having become a commonplace, we still see some objections to using grids. Hope you'll share your opinions in our comment section saying whether it's favorable to use a grid when developing a web page or it's not a beneficial principle for website design.


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.


Lilian Rigo

Lilian is a young but very talented copywriter who does researches on various themes. It seems that she knows everything about TemplateMonster products and loves to do listings that could help users to find something they need. Design trends, typography, coding, website building - Lilian writes about all those topics.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

3 responses to “Grid Approach in Web Design: Pros and Cons”

  1. TemplateDownload says:

    I really enjoyed working with the Extended Package Templates, which are based on a 960 grid. The layout is so much easier to adjust in comparison to other templates. Even changing the page width was no problem, as it was easy to create a new 1000px grid and implement it in the website.

  2. We Are Primate says:

    After years of web development I’m starting to warm to the idea of grid systems a lot more. Although it certainly come with limitations it is very handy for smoothing the handover from designers to developers. There are also a few nice grids out there now such as the 960 and the YUI one. The Yahoo one is a personal favourite because of its fraction selectors although there’s not a huge difference otherwise.

  3. Freddy says:

    I tell you what – this whole grid thing really rocks! Such a convenient type of layout.
    Nice article, too. Way to go guys

Leave a Reply

Your email address will not be published. Required fields are marked *