Share Your Work

stefen
Key Advisor | Partner
Key Advisor | Partner

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

 

HTML + HUBL

 

<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 }}" %}
		</div>
		{% endfor %}	
	</div>
</div>

CSS

 

 

.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, Community Champion, Kelp Web Developer
2 Replies 2
jennysowyrda
Community Manager
Community Manager

Simple Columns - a free custom module

Thanks for sharing @stefen!

 

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

 

Thanks,
Jenny

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Simple Columns - a free custom module

Thanks for the tag @jennysowyrda 

 

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev