Uplers Reveal How To Build Flexible Grid Columns on HubSpot

Over the last couple of years, grid-based layouts have managed to grab the eyeballs of web designers owing to their ability to reduce clutter and placing all the elements in a perfect order.

In simple terms, grids are the intersecting lines that guide designers while placing elements in a design. They can create the anatomy of the design with lines upon which various elements of the web designs could be placed. They are like a common graphic language that will help the designers and developers to work in synchronization for a website. It provides a logical structure to a design so that the elements don’t look enforced on the website that is the worst nightmare in terms of user experience.

Let’s have a look at some advantages of the grid layout.

• It provides a visual rhythm by arranging a massive content into evenly distributed rows and columns resulting into an extremely friendly user experience.
• It establishes visual and gives meaningfully places the series of related pieces of the web page.
• Being flexible, it becomes easy to move the content or navigation horizontally or vertically.
• You are not enforced with a fixed number of columns. You could have as many as you want.
• The fluid columns fit into any screen width, thus giving the responsive advantage. Components in fluid design will flow and adapt to the user environment.

How to achieve grid layout for web designs

Grid plugins will ensure that your content stays responsive by creating a system of flexible grids for your content to breathe in. Your task will be to provide the content and ensure that the desired media is displayed properly across all the devices so that your website looks sharp.

Here is our list of popular plugins available today for web developers:

The Pinterest layout is a visual treat for the users and masonry layout helps you in offering the same layout to users for posts, galleries, or online products.

• MixitUp: It is a high-performance, dependence-free library for grid layouts with animated document object model (DOM) manipulation, empowering developers to add, remove, filter and sort. MixitUp gels nicely with existing HTML and CSS, thus making it the most popular option for responsive layouts. It is also compatible with inline-flow, percentages, media queries, flexbox and more.
• Isotope: If you need a grid layout with the ability to create and adaptive and filterable portfolio, Isotope will be the right options as it has several user-friendly features.

How to implement these plugins

The plugins could be implemented in 3 easy steps:

• Include JS and CSS files to you html page
• Create HTML structure.
• Bind or initialize the plugin.

Common issues faced by people while implementing grid layout plugins in HubSpot COS/CMS:

The above mentioned 3 steps might not be the right solution and you may figure out the plugin doesn’t bind or initialize. Here is one of the most common problems posted by a user:

At Uplers, we figured out the core problem that was underlying this challenge and here is the outcome:

The major reason behind this is that the structure of HubSpot COS/CMS is dynamic in nature, resulting into deep nested structure.

So, how could you actually get a grid layout on HubSpot websites:

With some advanced script manipulation, Uplers has overcome this major constraint and has made it possible to restructure the code to integrate the grid plugin in your modules.

Solution

1. With the help of custom modules you could overcome the barrier without any need of scripting. If you are skilled in using the custom HTML, there is no need of additional jQuery scripting efforts as you will be able to paste the plugin script into the module and it will be integrated conveniently.

Binding code:

Output:

{{cta(‘fe043437-5520-4f28-bcbf-ae8e527b8245’)}}

Using scripting to overcome structural barrier:

2. If you are looking to build a layout structure using the HubSpot design manager, you will not be able to work with normal binding. You will need the help of a COS/CMS developer to normalize the structure after which it will be possible to bind the plugin with HTML.

Binding code:

Js code to

Output:

{{cta(‘5101cac0-ae44-4c66-8e32-f27382dce5e4’)}}

Conclusion

For modern designers grid layout has become something that they can’t go ahead without whether it’s a blog or a simple webpage. The difficulty of integration for functionalities such as grid layout makes some people feel that HubSpot is not a robust environment to support interactivity. However, a closer look into the depth and with some coding manipulation it will become as good as other platforms. If you understand how to exploit the structural limitations, it becomes one of the most advanced web development systems with all modern functionalities for HubSpotters.