使用bootstrap3网格在砌体上添加装订线

Question

I'm having trouble with coding gutter on masonry with the bootstrap3 grid.

This is my jsfiddle. https://jsfiddle.net/shelly_W/bg67fdjm/

<div class="container bg">
<h1>Masonry - Bootstrap 3 grid media queries</h1>
<!-- add extra container element for Masonry -->
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4"></div>
<div class="grid-item col-xs-12 col-sm-8 col-md-8 ">
<!-- add inner element for column content -->
<div class="grid-item-content grid-item-content--height400">1</div>
</div>
<div class="grid-item col-xs-12 col-sm-4 col-md-4">
<div class="grid-item-content grid-item-content--height230">2</div>
</div>
<div class="grid-item col-xs-12 col-sm-4 col-md-4">
<div class="grid-item-content grid-item-content--height443">3</div>
</div>
<div class="grid-item col-xs-12 col-sm-4 col-md-4">
<div class="grid-item-content grid-item-content--height230">4</div>
</div>
<div class="grid-item col-xs-12 col-sm-4 col-md-4">
<div class="grid-item-content grid-item-content--height518">5</div>
</div>
<div class="grid-item col-xs-12 col-sm-4 col-md-4">
<div class="grid-item-content grid-item-content--height518">6</div>
</div>
<div class="grid-item col-xs-12 col-sm-4 col-md-4">
<div class="grid-item-content grid-item-content--height230">7</div>
</div>
<div class="grid-item col-xs-12 col-sm-8 col-md-8">
<div class="grid-item-content grid-item-content--height230">8</div>
</div>
</div>

Source is: https://masonry.desandro.com/

What I'm trying to achieve is having 15px gutters between the masonry grid. I want to create a space between grid 1 and grid 2. I don't want padding on either of the outer container div edges of grid 1 or grid 2. I attempted to insert a 15px gutter by js, but this approach breaks the bootstrap responsive columns.

I've been trying to work this out for some time, but I can't figure out the right approach. Does anyone have any suggestions on how I might resolve this issue?

Please let me know if you need any further information. Thank you in advance for your help!

Answer 1

All you have to do is remove your current padding declarations on your .grid-size selector and use margin-bottom instead.

.grid-size {
    margin-bottom: 4%;
}

You can use a static value if you'd prefer; I used it a percentage here because you're going for a responsive design.

Here you can see your fiddle updated and in action.

Answer 2

If you want a solution that goes all the way to the edges and maintains a 15px gutter, you can keep your padding and use the CSS calc() method to adjust for the responsive container.

.grid-sizer { width:calc(33.33% - 10px); }
.grid-item { width: calc(33.33% - 10px); }
.grid-item--width2 { width: calc(66.66% - 5px); }

Then you just need to add media queries to your CSS to responsively change the width of the items:

@media (max-width: 500px) {
  .grid-sizer { width:calc(50% - 7.5px); }
  .grid-item { width: calc(50% - 7.5px); }
  .grid-item--width2 { width: 100%; }
}
@media (max-width: 350px) {
  .grid-sizer { width:100%; }
  .grid-item { width: 100%; }
}

Check out this fiddle: JSFiddle