5 Awesome Examples of Grid Layout Websites
How do you apply a grid without making the website look too straightforward? In this article a few examples and tips.
A grid layout is a system of intersecting lines that is placed over the design and is used to align all elements with it. The goal of the grid is to group the elements on the website and create order in the chaos. This can be done by using clear defined blocks with a solid background, or with a invisible grid. Either way the design will be easier to digest.
But how do you apply a grid without making your design look too straightforward? In this article you will find examples of websites with a grid layout that look both playful and organised.
The entire MGGA website is literally made up of blocks and everything is placed in a grid. Even the logo exists of squares. Yet the website does look not boring at all. The rectangular shapes make the total image interesting.
Because the blocks are sometimes breaking outside the grid, a visual tension is created. Just take a look at the image in the header, which is placed just next to the light gray block.
Jonathan Patterson takes a slightly different approach. Where MGGA made the blocks float, Jonathan Patterson is using framed blocks that are placed against each other.
This gives the website a very different appearance. The bright colors and the unusual way of navigating (the blocks serve as menu items) make this website even more unique.
Also We Are Blood uses blocks with different background colors. This helps with grouping the elements and setting them apart.
Occasionally blocks and elements stick out of the grids, making the whole more playful and less straightforward.
The Beats by Dre website also uses solid blocks. The blocks appear to be stacked on top of each other, creating a sense of depth. This doesn't look cluttered because the bottom of the cards still align.
Plenty of white space and the stylish typography with a clear hierarchy help out with the clean look.
Reed takes the grid very literally, they placed lines on top of the website that form vertical columns.
The rectangles from which the image on the homepage has been cut are intentionally placed outside this grid. These rectangles form the main image used on the detail page. The transition to the detail pages uses an elegant animation.
The straightforward typography and color palette are the finishing touches to this website.
How to Master the Design Grid
Here are some tips to successfully apply a grid to your own website:
- Place a grid on top of your design and align elements with the intersecting points;
- Play with whitespace, let your elements breathe to achieve a more clean design;
- Don't be afraid to break out of the grid; this makes the complete picture more interesting.
Do you need even more inspiration? Make sure to check out more websites in a grid layout.