CODEWITHSUNDEEP
csstwitter-bootstrapmasonry
Guerrilla
Guerrilla

Reputation: 14876

Central align masonry grid

I am trying to do 2 things:

  1. Make masonry grid 100% width and central align elements
  2. Use bootstrap visibility classes to show/hide certain elements

I did the code like so:

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  gutter: 5,
  fitWidth: true
});
.grid-item{
  margin: 0 auto 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item"><img src="https://via.placeholder.com/500x150" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/500x150" alt=""></div>
  <div class="grid-item d-lg-block d-none"><img src="https://via.placeholder.com/1000x150" alt=""></div>
</div>

I am using fitWidth: true but the grid container is fixed width.

What am I doing wrong?

Upvotes: 1

Views: 62

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

You will want to center the entire .grid using the Bootstrap mx-auto class...

<div class="grid mx-auto">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item">...</div>
</div>

https://codeply.com/p/kHGkGI4s11

Upvotes: 1

Simon
Simon

Reputation: 661

the Masonry setting is isFitWidth: true,

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  gutter: 5, 
  isFitWidth: true,
});

Masonry's Codepen example

Upvotes: 1

Related Questions