Menu icon Foundation
Separate gutter control for a 'block grid'

I have set my responsive gutter by adding this:

$grid-column-responsive-gutter: (
small: 20px,
medium: 60px,
large: 90px,
);

This is all fine for the two "medium-6 columns" elements, but my block grid on the right is also being affected – how can I define a separate responsive gutter pattern for the block grid? Obviously I can collapse it, but then the block grid falls out of line with the right column it's contained in.

Or is there another way to get the block grid to look more like a grid, with control over it's 'internal' padding only, i.e, the inner facing sides?

Screen shot 2016 01 07 at 09.59.16

foundation 6block gridgutterpadding

I have set my responsive gutter by adding this:

$grid-column-responsive-gutter: (
small: 20px,
medium: 60px,
large: 90px,
);

This is all fine for the two "medium-6 columns" elements, but my block grid on the right is also being affected – how can I define a separate responsive gutter pattern for the block grid? Obviously I can collapse it, but then the block grid falls out of line with the right column it's contained in.

Or is there another way to get the block grid to look more like a grid, with control over it's 'internal' padding only, i.e, the inner facing sides?

Screen shot 2016 01 07 at 09.59.16
Rafi Benkual over 3 years ago

The block grid is using the grid gutters because now that they are based on the grid (F6) it makes it easy to line up with the grid.

You can target the block grid only with CSS right?

[class*="small-up-"] .column {
  padding: 0 10px;
}

Not sure if the is a good way to have separate gutters for the block grid without changing how the grid is written entirely.

Jamie Brightmore over 3 years ago

I ended up manually defining the gutters I need for the medium-6 columns and scrapped using the mixin. Although I will still have to create more sass if I want to fine tune the block grid gutters.

Shame there isn't a built-in way to have separate control over more than just the global gutter parameters.

Thanks for the reply anyway Rafi.