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.