changing grid-column-count on breakpoint (Foundation)

Hi everybody,

(Sorry for my bad english, i apologize in advance)

I would like to modify foundation to be able to generate a different number of columns on mobile (4 cols), tablet (6 cols) and desktop (10 cols) … I’m sure it’s possible by changing the mixin generation columns but I fails … Someone can help me?

Thanks a lot !


I can’t help with this. But I am curious about your motivations to do this.

Generally with CSS grids like Foundations we always use 12 columns across all device sizes. This is because no matter how you look at it 12 is a great number to divide a number of ways, you can divide the screen into thirds, quarters, sixths… And you probably want to be able to do this on all screen sizes.

But we still want responsive designs right? Instead of changing the number of columns for different screen sizes, we change the numbers that a component uses. So on a large screen the contact form may only use half the screen (i.e. 6 columns), but on a smaller device we want it to take up the full screen (i.e. all 12 columns).

Here is an explanation of bootstraps grid system ( Also using a 12 column grid.

I may be way out of the ball park with this. But let me know :smiley: