CODEWITHSUNDEEP
sasszurb-foundation
Sivounette
Sivounette

Reputation: 55

Issue with Foundation 5 block-grid-default-spacing to be set horizontally and vertically

Here is my code : 

<div>
      <ul class="small-block-grid-3">
          <li><img src="img/split-img/mufe-header1-1.jpg"></li>
          <li><img src="img/split-img/mufe-header1-2.jpg"></li>
          <li><img src="img/split-img/mufe-header1-3.jpg"></li>
      </ul>
      <ul class="small-block-grid-3">
          <li><img src="img/split-img/mufe-header1-4.jpg"></li>
          <li><img src="img/split-img/mufe-header1-5.jpg"></li>
          <li><img src="img/split-img/mufe-header1-6.jpg"></li>
      </ul>
  </div>

Newly user of Foundation, i'm trying to customize the default spacing of the block-grid component in my scss file :

 $block-grid-default-spacing: rem-calc(5);

The result is that the horizontally spacing is correct but not the vertically one since the spacing is set in every left and right side of the grids so it might be doubled sometimes. Please check out https://i.sstatic.net/ehlVJ.jpg

Can anyone help me to fix this issue since I want the spacing (horizontally and vertically) to be unique.

Upvotes: 0

Views: 297

Answers (1)

Alex
Alex

Reputation: 5278

I don't believe block-grid spacing has any effect on vertical spacing. You would have to specify this in another CSS file that targets those block-grids and adds your vertical spacing.

So I might try the following:

$block-grid-default-spacing: 20px;

I would make this a px value so you can match it in your targeted CSS. Or you can leave it to the default, and handle all spacing in your custom CSS.

Then I would add a class to your ul's, so you can target them in separate CSS.

<ul class="small-block-grid-3 image-grid">

.image-grid li {
  margin: 20px 0;
}

or if you wanted to leave the $block-grid-default-spacing alone..

    .image-grid li {
      margin: 20px;
    }

Upvotes: 1

Related Questions