Uplers Reveal How To Build Flexible Grid Columns on HubSpot
- Bhuvan Desai
- April 11, 2017
- 3 Minute Read
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.
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.
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.
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.
Js code to
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.
Get Informative & Insightful Articles delivered to You Monthly
Thank you for submitting the details!
We will keep your information safe. Feel free to contact us with any questions at firstname.lastname@example.org
Please check your email for next steps shared by Robert.