Simple Columns - a free custom module

Advisor

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
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
2 Replies
Community Manager

Thanks for sharing @stefen!

 

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

 

Thanks,
Jenny


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

Thanks for the tag @jennysowyrda 

 

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