Menu icon Foundation
Remove spacing between grid

Page

I am thinking of using the Foundation Grid to put together a page with rows representing music data. In the attached image, you can see the basic layout.

I've tested with the grid, and it adds space between each ROW that I create. Is there a way to remove this code so I can closer mimic the wireframe example?

Should I use something else if the Foundation Grid doesn't work nicely?

Thanks
Steve

PS - Level 1 Foundation user if you can't tell

  <div class="row">
      <div class="large-12 columns">
          <div class="panel text-center">
              ROW
          </div>
      </div>
  </div>
    <div class="row">
      <div class="large-12 columns">
          <div class="panel text-center">
              ROW
          </div>
      </div>
  </div>

         

Page

I am thinking of using the Foundation Grid to put together a page with rows representing music data. In the attached image, you can see the basic layout.

I've tested with the grid, and it adds space between each ROW that I create. Is there a way to remove this code so I can closer mimic the wireframe example?

Should I use something else if the Foundation Grid doesn't work nicely?

Thanks
Steve

PS - Level 1 Foundation user if you can't tell

  <div class="row">
      <div class="large-12 columns">
          <div class="panel text-center">
              ROW
          </div>
      </div>
  </div>
    <div class="row">
      <div class="large-12 columns">
          <div class="panel text-center">
              ROW
          </div>
      </div>
  </div>

         
Brian Tan over 3 years ago

By default in F6, there is no top/bottom margin nor padding for class .row . You can check by adding

<style>
.row { border:1px solid red ; }
</style>

before your code. Any spacing between row is probably overridden elsewhere, or margin/padding from elements within.

Steve Valet over 3 years ago

You are absolutely correct. I guess the question really is, how do you modify the "panel" to remove padding? I'm guessing that's where it's coming from.

Is this done with SASS?

Brian Tan over 3 years ago

There is no panel component in F6. Perhaps it's from Bootstrap code?

You can override inline with something like this.

<style>
.panel {
  padding: 0;
  margin: 0;
}
</style>
<div class="row large-12 columns panel text-center">
              ROW
</div>
<div class="row large-12 columns panel text-center">
              ROW
</div>