Как исправить галерею?

Question

[Cosmonaut .]

Здравствуйте! пожалуйста помогите исправить галерею.

<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%;
}

Comments

[r_mustang]

залейте в codepen, если не сложно :)

[Cosmonaut .]

r_mustang,
залил )
https://codepen.io/its_jamshid/pen/YRQMOP

[Максим Тимофеев]

Cosmonaut ., Там одно фото, повторите там проблему

[Cosmonaut .]

Максим Тимофеев, https://bit.ly/2Fs6dTw ссылка на сайт

[shmatuan]

Cosmonaut .,

#dle-content {
  display: flex;
  flex-wrap: wrap;
}

Answer 1

[shmatuan]

float: left; - это очень плохой костыль, делайте через flex/grid

https://codepen.io/andreysh/pen/EOXzPB

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