Menu icon Foundation
Block Grid Default Spacing

I'm using small block grid to style Clearing Thumbs. I can control spacing in _settings.scss like this:

// $block-grid-default-spacing: rem-calc(20);
$block-grid-default-spacing: rem-calc(10);
         

But if I contain the block grid in grid like this:

// $align-block-grid-to-grid: false;
$align-block-grid-to-grid: true;

I can't force my own spacing, no matter what I do, spacing is always same as column gutter width. How can I override this?

// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
@if $align-block-grid-to-grid {$block-grid-default-spacing: rem-calc(10);}     
            

         

Foundation 5clearingblock gridspacingclearing thumbsthumbnailsGrid Spacing

I'm using small block grid to style Clearing Thumbs. I can control spacing in _settings.scss like this:

// $block-grid-default-spacing: rem-calc(20);
$block-grid-default-spacing: rem-calc(10);
         

But if I contain the block grid in grid like this:

// $align-block-grid-to-grid: false;
$align-block-grid-to-grid: true;

I can't force my own spacing, no matter what I do, spacing is always same as column gutter width. How can I override this?

// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
@if $align-block-grid-to-grid {$block-grid-default-spacing: rem-calc(10);}     
            

         
Geoff Kimball almost 4 years ago

If you want to override the padding, I would change $block-grid-default-spacing. The point of $align-block-grid-to-grid is that it changes the padding for you, so I'd try using $block-grid-default-spacing instead.

Bor Kolaric almost 4 years ago

I did change default spacing and it worked until I activated alignment. The reason I did that is, I had a little indentation - about 0.25rem to the right in my div with block grid elements.

Anyways, I solved the thing by disabling alignment again and adding some negative margin. Now I can again manipulate default spacing.

Now, I'm not sure if this is just my misunderstanding what $align-block-grid-to-grid does, or is it a glitch. Maybe I could clarify my question again: if you activate $align-block-grid-to-grid can you manipulate $block-grid-default-spacing?

Rafi Benkual almost 4 years ago

Looking at the CSS, this aligns the block grid to the row width rather than the width of a row with column gutters.

Marc Guay over 3 years ago

Coming across this problem myself.  It seems that if you do something like the following in settings:

$align-block-grid-to-grid: true;
@if $align-block-grid-to-grid {$block-grid-default-spacing: rem-calc(5);}

The value of $block-grid-default-spacing will be ignored/overidden in block-grid.scss here:

@if $align-block-grid-to-grid {
  $block-grid-default-spacing: $column-gutter;
}

And be reset to $column-gutter...

Update:  reason is because the setting in block-grid.scss is missing !default, posted a fix here https://github.com/zurb/foundation-sites/pull/8405.

Geoff Kimball over 3 years ago

I pulled in your fix, Marc—thanks!

jinch about 3 years ago

I'm not seeing where to adjust in _settings.scss ~ has this changed with F6.2.3?