Menu icon Foundation
Set breakpoint-specific $grid-column-gutter variables

I'm looking for a way to set different gutter values at different breakpoints. Currently, the _settings.scss file only includes 1 variable, which sets the gutter width globally, at all breakpoints: $grid-column-gutter. However, while a 30 pixel gutter (for example) looks great at the large breakpoint, it looks absurd at the small breakpoint, and with the excessive padding, wastes valuable real estate.

It would be great if additional variables could be accounted for, to allow for further grid customization and be breakpoint specific. Perhaps developers could define values for $grid-column-gutter-small, $grid-column-gutter-medium, etc.

I would be surprised if something like this does not already exist (as I'm sure I'm not the only one who's had this thought). Does anyone know of a method for how I can achieve this -- different gutters at different breakpoints?

Thanks!

guttersgridvariables

I'm looking for a way to set different gutter values at different breakpoints. Currently, the _settings.scss file only includes 1 variable, which sets the gutter width globally, at all breakpoints: $grid-column-gutter. However, while a 30 pixel gutter (for example) looks great at the large breakpoint, it looks absurd at the small breakpoint, and with the excessive padding, wastes valuable real estate.

It would be great if additional variables could be accounted for, to allow for further grid customization and be breakpoint specific. Perhaps developers could define values for $grid-column-gutter-small, $grid-column-gutter-medium, etc.

I would be surprised if something like this does not already exist (as I'm sure I'm not the only one who's had this thought). Does anyone know of a method for how I can achieve this -- different gutters at different breakpoints?

Thanks!

This post has been closed. No new replies can be added.

Jenna Gengler over 3 years ago

WHOA.

Go to the Docs this morning looking for info on another issue and lo and behold, this exact feature was released 11 hours ago as part of 6.1!!

Going to discuss an immediate upgrade with my fellow devs. Thanks Zurb! Best Christmas present ever! :)