Simple Columns - a free custom module


If you've ever created templates that are exactly the same as each other and the only thing that is different between them is how many columns or which side a column is aligned to? e.g. "2 Column - Right", "3 Columns", "2 Column - Left", etc...


I made a flexbox powered custom module to specifically get rid of these extra templates. With this module you can easily add columns to your content area without having to swap templates. You can adjust each column's size so you can have any combination of column widths.


Source Code




<div class="columns-module-wrapper">
	<div class="columns-module  columns-module__align-{{ module.vertical_alignment }}">
		{% for item in module.column %}
		<div class="columns-module-item" style="-ms-flex-preferred-size: {{ item.flex_basis }}px; flex-basis: {{ item.flex_basis }}px;">
			{% inline_rich_text field="rich_text" value="{{ item.rich_text }}" %}
		{% endfor %}	




.columns-module-wrapper {
	margin: 2rem 0;
.columns-module {
	margin: -1rem;
@media (min-width: 767px) {
	.columns-module {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	.columns-module__align-stretch {
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	.columns-module__align-center {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	.columns-module__align-flex-start {
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	.columns-module__align-flex-end {
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
.columns-module-item {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin: 1rem;


Like the name suggest, it's a very simple module, but it's something that really comes in handy for all you want is a quick column or two. I decided to go with a media query to wrap the columns at the same breakpoint as built-in HubSpot grid so it behaves as HubSpot users might expect.


Check it out and let me know what you think. I'd love to know if anyone has accomplished the same thing in a different way.


Simple Columns HubSpot Module

Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
2 Replies 2
Community Manager

Thanks for sharing @stefen!


@Stephanie-OG@tjoyce@dennis_e@Kevin-C@Anton@Jsum@Jon_McLaren@AJLaPorte_diagr thought you might be interested in this as well! 



Did my post help answer your query? Help the Community by marking it as a solution

Thanks for the tag @jennysowyrda 


Super simple solution. Love it! Now where were you with this info back when we started our website haha