Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Minimalism these days seems to be trending in web design. No wonder you see all those simplistic web layouts here and there while surfing the net. For the past couple of years, we've gotten used to seeing well-structured websites. Strict lines and light backgrounds leave nothing to the imagination. Yet, everybody wants to try it for their own project. Today I'd like to take you on a ride to the land of grid based layouts. Let's get a little deeper into what grids are and why we love them so much.
In short, grids are intersecting horizontal and vertical lines having regular intervals between them. Grids are the synonym of structure and order. Some even think it's impossible to organize the visual objects on the web page without grids. So, there are a few quite obvious reasons for grids being so popular:
- grids create the content structure
- grids improve readability
- grids help to unclutter your design
- grids are flexible
- grids make your job quicker
To understand what grids do for a website layout, take a look at these two images:
Source: Guides Vnda Brazil
Source: Guides Vnda Brazil
This is a sample design overlaid with grids. Thanks to these grids, the website sections are in better order. Also, the elements are placed inside the measures of grids and there is a fixed space between them. It makes the design look more cohesive.
There are many tools, generators, and frameworks allowing fast and comfortable use of grids.
I bet, designers here have used the 960grid
CSS framework. Or at least heard of it. Photoshop also has grid plugins like Modular Grid Pattern
or 960px grid PSD
With growing pixel densities of modern screens, frameworks like 1140 CSS Grid have appeared. It's now retired, but you can check out the archive
. Responsive designs demand responsive approaches in using grids. That's why Skeleton
Grid System came round.
Not only you can learn how to choose the grid structure
for your website, but create grids on your own as well. Also, "Grid System in Graphic Design"
by Josef Muller-Brockmann will be a great read.
There is another trend that derives from the grid based layout - Masonry layout. Designers may refer to is as a 'card based layout' or 'Pinterest style layout'. This is because Pinterest
was the first online project that used this kind of layout. Based on columns, the rows don’t have a fixed height. This leads to better organization of elements within a web page.
Source: W3 update tutorials
Enough with theory, let’s proceed to practice. Just take a look at several live examples of websites using a grid based structure. No secret, masonry grid style layout is trending in web design. It makes a website look clean and organized. Uncluttering the content structure is a real perk of using this method. Masonry galleries allow visitors to pay more attention to your work. Isn't it an optimal solution for designers and photographers?
Source: Rodgers Townsend Branding Agency
Observe a great example of masonry gallery. The tiles of images lead to a particular website section. This kind of structure looks artsy and handy at the same time. The same-sized squares of images look organized, yet with a hint of chaos. The intersection of text and imagery makes the homepage look a little like a collage.
Source: Faebric Design Store
This one is a perfect way to make a product highlight or showcase product cards. Every image tile leads visitors to a separate website section. And the sub-sections also have this masonry principle in mind. This way a website looks edgier.
Source: Teruhiro Yanagihara Home Page
Our third example also utilizes the masonry grid based layout. The only difference is in tiles separated from one another. This one reminds of a card-based layout. A bit of asymmetry gives it even more charm. That’s a really cool way to design a blog.
More and more people today use WordPress themes for their websites. And not for nothing - they are quite handy and offer many customization possibilities. Template providers follow the web design trends and embody the best practices in their products. This is why grid based layouts are quite common in pre-made designs lately.
Grids are versatile, so it's possible to apply them in business and personal websites. Let's take a look at several examples of WordPress themes that make good use of grids. Let’s take business first. Not a secret that real estate business is Internet dependent. Since there's a need to showcase housing online, all content needs structure. You can see masonry grid based layouts in many real estate WordPress themes
Combined with flat design, a layout like this gives space for showcasing business deals. Grid alignment alone creates professional look and feel. Grid layouts are perfect for product-based businesses. They create better user experiences and allow visitors surf the website nice and easy.
But what if your project is not a business related one? Social websites are quite popular among different demographics. People get engaged in different social and religious activities and organizations. This is why these types of online resources must look neat and have a well-structured content. And here's where grids come along. Take religious WordPress themes
, for instance. Even though they don't use masonry structure, they still have a basic grid alignment. Thanks to this navigation becomes easier and handier.
And what about creative projects? Do they exploit the strict grid structure in the design? Some may think that grids can make a music website look too strict and boring. This is not quite true. Contrary to this popular belief, grids become quite helpful in laying out the discography. Or creating an exciting gallery for a singer or a band. For this reason music WordPress themes
are great for creative projects.
Even though grids associate with structure and organization, they're not rock solid design principles. It's wise to think of grids as a design metaphor that should guide and not restrain your imagination. Grids are invisible, yet a grid based website channels structure. As you can see, grid based layouts are a "here to stay" web design trend. So, don’t be afraid to use it in your projects!