# Section template with five columns

**URL:** <https://community.hubspot.com/t/section-template-with-five-columns/51258>\
**Category:** CMS Development\
**Created:** [February 10, 2022, 12:35am UTC](https://community.hubspot.com/t/section-template-with-five-columns/51258 "2022-02-10T00:35:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JKeith](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jkeith/32/31851_2.png) [@JKeith](https://community.hubspot.com/u/JKeith)\
**Post date:** [February 10, 2022, 12:35am UTC](https://community.hubspot.com/t/section-template-with-five-columns/51258/1 "2022-02-10T00:35:19Z")

</div>

Hi,

Our designer created a “team” page that has team member photos and names arranged in five columns on desktop and three on mobile. Non-developers need to be able to regularly update the page, so I built a team member card module so individual team members can easily be added or deleted or the order changed by dragging and dropping.

What I am running into is that the built in grid of Hubspot cannot accomodate five even columns and each invidual card gets wrapped in so much markup when it gets dropped in that it would be very difficult to override and create my own grid with CSS.

Is there a way for a module to be dropped in without all the wrapping spans and divs so iIcan just do some normal flexbox grid styling?

Or is there a way to create a section template with five columns? I have attempted it with the following:

```lia-code-sample
<!--
 templateType: section
 label: Five Column Section
 description: "Five columns"
 isAvailableForNewContent: true
-->
{% dnd_area 'five-columns'
 label='Five Column Section',
 %}
 {% dnd_section %}
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_column %} 
 {% end_dnd_column %}
 {% dnd_column %} 
 {% end_dnd_column %}
 {% dnd_column %} 
 {% end_dnd_column %}
 {% dnd_column %} 
 {% end_dnd_column %}
 {% dnd_column %} 
 {% end_dnd_column %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %} 
{% end_dnd_area %}

```

, but I get an error that says “Invalid argument in dnd\_column:”

![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/4/747387903a1d5b5fe0bfcfb3be24a097b7128332.png)

I hope I am missing something obvious and this is actually possible? I appreciate any guidance you can offer.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [February 10, 2022, 7:54am UTC](https://community.hubspot.com/t/section-template-with-five-columns/51258/2 "2022-02-10T07:54:43Z")

</div>

Hi @JKeith,

never seen this before. Maybe because HubSpot is still based on Bootstrap2.3.6(12 col grid) and 5 doesn’t split evenly unless you set it to 10 cols or maybe because I don’t do so many dnd columns side by side 🙂

Have you thought about a “row-module” with flexbox with a repeater for each team member?

What I’m thinking about is:  
If HubSpot doesn’t allow you create a 5 col grid - create your own 🙂

It’s much easier than it sounds. In your case it would be

1. create a new custom module
2. add all of your desired informations(Image, name, position… ) as functions
3. wrap them in a group and mark that group as a repeater(at the bottom of the group settings)
4. write your layout for the row (see the example below)
5. Insert the functions in the layout
6. save the module
7. copy the path to the module(right-click on the module in the design-manager folder structure)
8. paste the path into the template
9. have fun

Example for the layout:

```lia-code-sample
<div class="moduleWrapper">
<div class="moduleContainer">
{% for item in module.team %}
<div class="singleMember">
<img src="{{ item.profile_pic.src }}" alt="{{ item.profile_pic.src }}" />
<h5>{{ item.member_name }}</h5>
<span class="singleMemberPosition">{{ item.position }}</span>
...
</div>
{% endfor %}
</div>
</div>

```

CSS part(the magic part)

```lia-code-sample
.moduleContainer{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 align-content: center;
}
.singleMember{
padding:32px;
margin:16px;
max-width:20%
}

@media screen and max-width(1025px){
.single-member{
max-width:33.3%
}
}
@media screen and max-width(769px){
.single-member{
max-width:50%
}
}
@media screen and max-width(480px){
.single-member{
max-width:100%
}
}

```

Hope this helps.

best,

Anton

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [February 10, 2022, 9:52am UTC](https://community.hubspot.com/t/section-template-with-five-columns/51258/3 "2022-02-10T09:52:46Z")

</div>

Hi @JKeith ,  
You can do this by following ways:  
1) By dnd column sections option  
{% dnd\_area ‘five-columns’  
label=‘Five Column Section’,  
%}  
{% dnd\_section %}  
{% dnd\_column %}  
{% dnd\_row %}  
{% dnd\_column  
width=‘2’,  
offset=‘0’,  
%}  
{% end\_dnd\_column  
width=‘2’,  
offset=‘2’,  
%}  
{% dnd\_column  
width=‘2’,  
offset=‘4’,  
%}  
{% end\_dnd\_column  
width=‘2’,  
offset=‘6’,  
%}  
{% dnd\_column  
width=‘2’,  
offset=‘8’,  
%}  
{% end\_dnd\_column %}  
{% end\_dnd\_row %}  
{% end\_dnd\_column %}  
{% end\_dnd\_section %}  
{% end\_dnd\_area %}  
2) By css  
Give class to dnd\_area like  
{% dnd\_area ‘five-columns’ class=‘five-column-section’ label=‘Five Column Section’, %}  
After it you can give CSS to column by taking reference of class like  
.five-column-section .dnd-column {  
width:20% !important;  
padding:10px !important;  
}  
Hope this helps!  
If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![felixmacaspac](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/felixmacaspac/32/33923_2.png) [@felixmacaspac](https://community.hubspot.com/u/felixmacaspac)\
**Post date:** [June 17, 2025, 10:09am UTC](https://community.hubspot.com/t/section-template-with-five-columns/51258/4 "2025-06-17T10:09:40Z")

</div>

I encountered this issue just right now, I implemented an alternative solution for this if you wanted to really implemented the 5 column layout without creating a custom module. On your **\_layout.css** you can add this line of code

```lia-code-sample
 .row-fluid:has(> .widget-span:nth-child(5):last-child) > .widget-span {
 width: calc(20% - var(--column-gap) * 0.8);
 }	

```

---

<div class="post-metadata">

**Author:** ![IM50](https://avatars.discourse-cdn.com/v4/letter/i/e47c2d/32.png) [@IM50](https://community.hubspot.com/u/IM50)\
**Post date:** [December 24, 2025, 10:54pm UTC](https://community.hubspot.com/t/section-template-with-five-columns/51258/5 "2025-12-24T22:54:08Z")

</div>

/\* Exactly 5 columns in one row (only when the row has exactly 5 widget-span children) \*/  
.row-fluid:has(\> .widget-span:nth-child(5):last-child) {  
display: flex;  
flex-wrap: wrap;

/\* Custom gutters instead of using gap \*/  
--g: 16px;  
margin-left: calc(var(--g) / -2);  
margin-right: calc(var(--g) / -2);  
}

/\* Columns \*/  
.row-fluid:has(\> .widget-span:nth-child(5):last-child) \> .widget-span {  
float: none !important;  
clear: none !important;

/\* Important: remove HubSpot/Bootstrap default spacing that breaks 5 columns \*/  
margin-left: 0 !important;  
padding-left: calc(var(--g) / 2) !important;  
padding-right: calc(var(--g) / 2) !important;

box-sizing: border-box;  
min-width: 0;  
max-width: none !important;

flex: 0 0 20%;  
}

/\* Tablet: 3 columns per row \*/  
[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (max-width: 1024px) {  
.row-fluid:has(\> .widget-span:nth-child(5):last-child) \> .widget-span {  
flex-basis: 33.3333%;  
}  
}

/\* Mobile: 1 column per row \*/  
[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (max-width: 768px) {  
.row-fluid:has(\> .widget-span:nth-child(5):last-child) \> .widget-span {  
flex-basis: 100%;  
}  
}