How to fix gallery?

Question

css

Hello! please help fix the gallery.

<div class="p col-md-3 col-xs-6"> 
<div class="grid">
[full-link]       
<figure class="effect-sadie">
[xfgiven_image]<img  src="[xfvalue_image]" alt="{title}"/>[/xfgiven_image]
<figcaption>
<p>{title}<br>[xfgiven_location][xfvalue_location][/xfgiven_location]</p>
</figcaption>			
</figure>
[/full-link]  
 </div>  
</div>

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
    -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

figure:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
 -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  filter: none; /* IE 6-9 */    
}   

figure {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 0;
    background: #fff;
    overflow: hidden;
}


figure.effect-sadie figcaption::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 75%);
  content: '';
  opacity: 0;
  transform: translate3d(0,20%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 18px;
    width: 100%;
    opacity: 0;
    color: #2b2b2b;
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.grid{
    max-width: 320px;
  margin: 0 auto;
}

.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}

.grid figure img{
    text-align: center;
    max-width: 100%;
}

Answer 1

float: left; - this is a very bad crutch, do it through flex/grid
https://codepen.io/andreysh/pen/EOXzPB

.grid{
  display: flex;
  flex-wrap :wrap;