Grid-based design is simple and elegant. It uses pure classic forms like square and rectangle in various combinations. Such combinations are multiple and help to create unique layouts. Grid is the main organizing design for Metro style, but it’s not the exclusive Metro creation. In general, most of website layouts are based on grid structure that determines where each and every element should be arranged.
![](data:image/svg+xml;charset=utf-8,<svg height="342" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Designer use grid intersections of vertical and horizontal lines to arrange all the elements in a proper places and create attractive and functional layout. Grid helps to see how elements of different shapes and sizes may cohabit in one structure and form a perfect harmony. So the idea of creating a grid layout is as old as time. Famous rule of thirds used in photography or the Golden Ratio rule also explain a proper use of grids in the layout design.
Sismo Design
![](data:image/svg+xml;charset=utf-8,<svg height="306" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="563" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid layout is a perfect solution for various-themed websites. It provides the design with clear and nicely organized interface, well-structured menu and navigation. Moreover, large pics arranged in grid layout make it mobile-friendly. Due to huge clickable buttons and navigation elements grid layouts are perfect for responsive web design.
100 Years of Design
![](data:image/svg+xml;charset=utf-8,<svg height="305" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid-Based Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="656" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid-Based Design Versions
The simplest version of the grid-based layout may be represented by a set of columns outlined by so-called gutters. This is the most primitive and plain example of the grid layout, but with a proper use of elements and their design it may also get zest and look extremely elegant.
Outdated Browser
![](data:image/svg+xml;charset=utf-8,<svg height="308" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
The website template below shows the design that imitates grid layout with a help of a background. Wooden boards create an illusion of columns that become a base for navigation menu buttons.
The next step is adding a few horizontal lines to create squares of the equal size. Such organization is widely used today and may be found in multiple layouts, designs of Home Pages or Gallery structure.
Speedo USA
![](data:image/svg+xml;charset=utf-8,<svg height="310" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
McDonalds
![](data:image/svg+xml;charset=utf-8,<svg height="316" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Good Morning
![](data:image/svg+xml;charset=utf-8,<svg height="313" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid-based layout doesn’t mean all parts in it should be equal – it’s boring in most cases. Moreover, it’s much better to use different sizes of components to create a vivid structure and intrigue a user. Developers and designers that work on website template use a Golden Ratio rule to create unique layouts that will represent the information in the most well-structured way.
La Vie La Fresh
![](data:image/svg+xml;charset=utf-8,<svg height="312" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Cyril Masson
Additionally, it’s not necessary to use ideal rectangle in grid layout. Playing with shapes, making use of trapezoids and irregular squares adds zest and makes design unique. Some designers, like in the examples below, use totally innovative approach for grid designs.
Orangina
![](data:image/svg+xml;charset=utf-8,<svg height="319" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Tapmates
![](data:image/svg+xml;charset=utf-8,<svg height="619" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Where to Use Grid Design
The use of grid layout structure is various. The most popular application is grid photo gallery. It allows showcasing works at best in the most clear and functional manner.
Jam3
Grid Portfolio Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="750" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid-Based Portfolio Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="570" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid style may be implemented in the background design to add creativity and brightness to the website.
Grid-Style Background Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="335" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Another way is using grid layout for the navigation menu design. Such application is taken from the Metro style designs where navigation is represented in a form of large pictures all over the Home Page.
Cheval Blanc
Blocklevel
![](data:image/svg+xml;charset=utf-8,<svg height="612" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Website Template with Grid-Style Menu
![](data:image/svg+xml;charset=utf-8,<svg height="294" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Navigation menu may be created in column style what makes such design unique and fascinating, like in the example below.
Canalsat
The overall structure of website elements arrangement may also make use of grid design. It may become useful for fashion lookbooks and online stores that wish to showcase their products in a clear and highly representative manner.
Lush
![](data:image/svg+xml;charset=utf-8,<svg height="439" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Jewelry Store Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="936" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Grid is a nice and versatile design that becomes a huge trend and gains its followers fast. So, we’ll see how it will transform in the future.