Broken Grid Layout Website Designing

Written by Ratul Pal
Posted on - 5 min read

What is Broken Grid Layout?🤔

A grid holds a design together. Even when elements are physically separated from each other, something invisible connects them together.

Basically, there are four types of grids in graphic design.

  • Manuscript Grid
  • Column Grid
  • Modular Grid
  • Hierarchical Grid

Broken grid layouts in a website do not always challenge these grids. It is about adding a little asymmetry in these grids to make the website attractive.

Let’s have a look at these broken grid layout examples. This website contains a neat and broken grid schemes used in their websites.

UI design grid breaks the whole screen into big columns. One can asymmetrically place their elements to learn about this you can search for broken grid layout tutorials.

Broken grid websites look untidy but the perception is no more true.

Asymmetry and broken grid layouts in web design are the new trend in 2019.

V U L P A 

A split-screen layout works when full-screen elements are divided into two or more vertical parts. This kind of website layout is trending these days.

Broken grid layouts website look neat and tidy.


Grids or no grids. All eyes will be on content and its placement. Despite of proper templates and content, people fail to give an impression to their users.

Read more blogs on web designing to become a pro in web designing.

Like these designs?

For your website designing or re-designing contact us.

Please call us at +91-783585111four or email at contact(at-the-rate)