Grid gap inconsistent between rows and columns












1














I'm trying to make the space between the rows equal to the columns gap
but I really don't know what property is creating this gap between the rows. I tried fiddling around with grid gap to no success.



Also when the screen size reduces the right margin disappears.



Struggling to make this gallery work responsively.






.container {

  margin: auto;

  padding: 0 1rem;

  max-width: 90rem;

  width: 100%;

}



.grid {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -ms-flex-flow: row wrap;

  flex-flow: row wrap;

}



.grid>[class*="column-"] {

  display: block;

}



.first {

  -webkit-box-ordinal-group: 0;

  -ms-flex-order: -1;

  order: -1;

}



.last {

  -webkit-box-ordinal-group: 13;

  -ms-flex-order: 12;

  order: 12;

}



.align-top {

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: start;

}



.align-center {

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}



.align-bottom {

  -webkit-box-align: end;

  -ms-flex-align: end;

  align-items: end;

}



.column-xs-1 {

  -ms-flex-preferred-size: 8.3333333333%;

  flex-basis: 8.3333333333%;

  max-width: 8.3333333333%;

}



.column-xs-2 {

  -ms-flex-preferred-size: 16.6666666667%;

  flex-basis: 16.6666666667%;

  max-width: 16.6666666667%;

}



.column-xs-3 {

  -ms-flex-preferred-size: 25%;

  flex-basis: 25%;

  max-width: 25%;

}



.column-xs-4 {

  -ms-flex-preferred-size: 33.3333333333%;

  flex-basis: 33.3333333333%;

  max-width: 33.3333333333%;

}



.column-xs-5 {

  -ms-flex-preferred-size: 41.6666666667%;

  flex-basis: 41.6666666667%;

  max-width: 41.6666666667%;

}



.column-xs-6 {

  -ms-flex-preferred-size: 50%;

  flex-basis: 50%;

  max-width: 50%;

}



.column-xs-7 {

  -ms-flex-preferred-size: 58.3333333333%;

  flex-basis: 58.3333333333%;

  max-width: 58.3333333333%;

}



.column-xs-8 {

  -ms-flex-preferred-size: 66.6666666667%;

  flex-basis: 66.6666666667%;

  max-width: 66.6666666667%;

}



.column-xs-9 {

  -ms-flex-preferred-size: 75%;

  flex-basis: 75%;

  max-width: 75%;

}



.column-xs-10 {

  -ms-flex-preferred-size: 83.3333333333%;

  flex-basis: 83.3333333333%;

  max-width: 83.3333333333%;

}



.column-xs-11 {

  -ms-flex-preferred-size: 91.6666666667%;

  flex-basis: 91.6666666667%;

  max-width: 91.6666666667%;

}



.column-xs-12 {

  -ms-flex-preferred-size: 100%;

  flex-basis: 100%;

  max-width: 100%;

}



@media (min-width: 48rem) {

  .column-sm-1 {

    -ms-flex-preferred-size: 8.3333333333%;

    flex-basis: 8.3333333333%;

    max-width: 8.3333333333%;

  }

  .column-sm-2 {

    -ms-flex-preferred-size: 16.6666666667%;

    flex-basis: 16.6666666667%;

    max-width: 16.6666666667%;

  }

  .column-sm-3 {

    -ms-flex-preferred-size: 25%;

    flex-basis: 25%;

    max-width: 25%;

  }

  .column-sm-4 {

    -ms-flex-preferred-size: 33.3333333333%;

    flex-basis: 33.3333333333%;

    max-width: 33.3333333333%;

  }

  .column-sm-5 {

    -ms-flex-preferred-size: 41.6666666667%;

    flex-basis: 41.6666666667%;

    max-width: 41.6666666667%;

  }

  .column-sm-6 {

    -ms-flex-preferred-size: 50%;

    flex-basis: 50%;

    max-width: 50%;

  }

  .column-sm-7 {

    -ms-flex-preferred-size: 58.3333333333%;

    flex-basis: 58.3333333333%;

    max-width: 58.3333333333%;

  }

  .column-sm-8 {

    -ms-flex-preferred-size: 66.6666666667%;

    flex-basis: 66.6666666667%;

    max-width: 66.6666666667%;

  }

  .column-sm-9 {

    -ms-flex-preferred-size: 75%;

    flex-basis: 75%;

    max-width: 75%;

  }

  .column-sm-10 {

    -ms-flex-preferred-size: 83.3333333333%;

    flex-basis: 83.3333333333%;

    max-width: 83.3333333333%;

  }

  .column-sm-11 {

    -ms-flex-preferred-size: 91.6666666667%;

    flex-basis: 91.6666666667%;

    max-width: 91.6666666667%;

  }

  .column-sm-12 {

    -ms-flex-preferred-size: 100%;

    flex-basis: 100%;

    max-width: 100%;

  }

}



@media (min-width: 62rem) {

  .column-md-1 {

    -ms-flex-preferred-size: 8.3333333333%;

    flex-basis: 8.3333333333%;

    max-width: 8.3333333333%;

  }

  .column-md-2 {

    -ms-flex-preferred-size: 16.6666666667%;

    flex-basis: 16.6666666667%;

    max-width: 16.6666666667%;

  }

  .column-md-3 {

    -ms-flex-preferred-size: 25%;

    flex-basis: 25%;

    max-width: 25%;

  }

  .column-md-4 {

    -ms-flex-preferred-size: 33.3333333333%;

    flex-basis: 33.3333333333%;

    max-width: 33.3333333333%;

  }

  .column-md-5 {

    -ms-flex-preferred-size: 41.6666666667%;

    flex-basis: 41.6666666667%;

    max-width: 41.6666666667%;

  }

  .column-md-6 {

    -ms-flex-preferred-size: 50%;

    flex-basis: 50%;

    max-width: 50%;

  }

  .column-md-7 {

    -ms-flex-preferred-size: 58.3333333333%;

    flex-basis: 58.3333333333%;

    max-width: 58.3333333333%;

  }

  .column-md-8 {

    -ms-flex-preferred-size: 66.6666666667%;

    flex-basis: 66.6666666667%;

    max-width: 66.6666666667%;

  }

  .column-md-9 {

    -ms-flex-preferred-size: 75%;

    flex-basis: 75%;

    max-width: 75%;

  }

  .column-md-10 {

    -ms-flex-preferred-size: 83.3333333333%;

    flex-basis: 83.3333333333%;

    max-width: 83.3333333333%;

  }

  .column-md-11 {

    -ms-flex-preferred-size: 91.6666666667%;

    flex-basis: 91.6666666667%;

    max-width: 91.6666666667%;

  }

  .column-md-12 {

    -ms-flex-preferred-size: 100%;

    flex-basis: 100%;

    max-width: 100%;

  }

}



@media (min-width: 75rem) {

  .column-lg-1 {

    -ms-flex-preferred-size: 8.3333333333%;

    flex-basis: 8.3333333333%;

    max-width: 8.3333333333%;

  }

  .column-lg-2 {

    -ms-flex-preferred-size: 16.6666666667%;

    flex-basis: 16.6666666667%;

    max-width: 16.6666666667%;

  }

  .column-lg-3 {

    -ms-flex-preferred-size: 25%;

    flex-basis: 25%;

    max-width: 25%;

  }

  .column-lg-4 {

    -ms-flex-preferred-size: 33.3333333333%;

    flex-basis: 33.3333333333%;

    max-width: 33.3333333333%;

  }

  .column-lg-5 {

    -ms-flex-preferred-size: 41.6666666667%;

    flex-basis: 41.6666666667%;

    max-width: 41.6666666667%;

  }

  .column-lg-6 {

    -ms-flex-preferred-size: 50%;

    flex-basis: 50%;

    max-width: 50%;

  }

  .column-lg-7 {

    -ms-flex-preferred-size: 58.3333333333%;

    flex-basis: 58.3333333333%;

    max-width: 58.3333333333%;

  }

  .column-lg-8 {

    -ms-flex-preferred-size: 66.6666666667%;

    flex-basis: 66.6666666667%;

    max-width: 66.6666666667%;

  }

  .column-lg-9 {

    -ms-flex-preferred-size: 75%;

    flex-basis: 75%;

    max-width: 75%;

  }

  .column-lg-10 {

    -ms-flex-preferred-size: 83.3333333333%;

    flex-basis: 83.3333333333%;

    max-width: 83.3333333333%;

  }

  .column-lg-11 {

    -ms-flex-preferred-size: 91.6666666667%;

    flex-basis: 91.6666666667%;

    max-width: 91.6666666667%;

  }

  .column-lg-12 {

    -ms-flex-preferred-size: 100%;

    flex-basis: 100%;

    max-width: 100%;

  }

}



@supports (display: grid) {

  .grid {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-template-rows: auto;

  }

  .grid>[class*="column-"] {

    margin: 0;

    max-width: 100%;

  }

  .column-xs-1 {

    grid-column-start: span 1;

    grid-column-end: span 1;

  }

  .column-xs-2 {

    grid-column-start: span 2;

    grid-column-end: span 2;

  }

  .column-xs-3 {

    grid-column-start: span 3;

    grid-column-end: span 3;

  }

  .column-xs-4 {

    grid-column-start: span 4;

    grid-column-end: span 4;

  }

  .column-xs-5 {

    grid-column-start: span 5;

    grid-column-end: span 5;

  }

  .column-xs-6 {

    grid-column-start: span 6;

    grid-column-end: span 6;

  }

  .column-xs-7 {

    grid-column-start: span 7;

    grid-column-end: span 7;

  }

  .column-xs-8 {

    grid-column-start: span 8;

    grid-column-end: span 8;

  }

  .column-xs-9 {

    grid-column-start: span 9;

    grid-column-end: span 9;

  }

  .column-xs-10 {

    grid-column-start: span 10;

    grid-column-end: span 10;

  }

  .column-xs-11 {

    grid-column-start: span 11;

    grid-column-end: span 11;

  }

  .column-xs-12 {

    grid-column-start: span 12;

    grid-column-end: span 12;

  }

  @media (min-width: 48rem) {

    .column-sm-1 {

      grid-column-start: span 1;

      grid-column-end: span 1;

    }

    .column-sm-2 {

      grid-column-start: span 2;

      grid-column-end: span 2;

    }

    .column-sm-3 {

      grid-column-start: span 3;

      grid-column-end: span 3;

    }

    .column-sm-4 {

      grid-column-start: span 4;

      grid-column-end: span 4;

    }

    .column-sm-5 {

      grid-column-start: span 5;

      grid-column-end: span 5;

    }

    .column-sm-6 {

      grid-column-start: span 6;

      grid-column-end: span 6;

    }

    .column-sm-7 {

      grid-column-start: span 7;

      grid-column-end: span 7;

    }

    .column-sm-8 {

      grid-column-start: span 8;

      grid-column-end: span 8;

    }

    .column-sm-9 {

      grid-column-start: span 9;

      grid-column-end: span 9;

    }

    .column-sm-10 {

      grid-column-start: span 10;

      grid-column-end: span 10;

    }

    .column-sm-11 {

      grid-column-start: span 11;

      grid-column-end: span 11;

    }

    .column-sm-12 {

      grid-column-start: span 12;

      grid-column-end: span 12;

    }

  }

  @media (min-width: 62rem) {

    .column-md-1 {

      grid-column-start: span 1;

      grid-column-end: span 1;

    }

    .column-md-2 {

      grid-column-start: span 2;

      grid-column-end: span 2;

    }

    .column-md-3 {

      grid-column-start: span 3;

      grid-column-end: span 3;

    }

    .column-md-4 {

      grid-column-start: span 4;

      grid-column-end: span 4;

    }

    .column-md-5 {

      grid-column-start: span 5;

      grid-column-end: span 5;

    }

    .column-md-6 {

      grid-column-start: span 6;

      grid-column-end: span 6;

    }

    .column-md-7 {

      grid-column-start: span 7;

      grid-column-end: span 7;

    }

    .column-md-8 {

      grid-column-start: span 8;

      grid-column-end: span 8;

    }

    .column-md-9 {

      grid-column-start: span 9;

      grid-column-end: span 9;

    }

    .column-md-10 {

      grid-column-start: span 10;

      grid-column-end: span 10;

    }

    .column-md-11 {

      grid-column-start: span 11;

      grid-column-end: span 11;

    }

    .column-md-12 {

      grid-column-start: span 12;

      grid-column-end: span 12;

    }

  }

  @media (min-width: 75rem) {

    .column-lg-1 {

      grid-column-start: span 1;

      grid-column-end: span 1;

    }

    .column-lg-2 {

      grid-column-start: span 2;

      grid-column-end: span 2;

    }

    .column-lg-3 {

      grid-column-start: span 3;

      grid-column-end: span 3;

    }

    .column-lg-4 {

      grid-column-start: span 4;

      grid-column-end: span 4;

    }

    .column-lg-5 {

      grid-column-start: span 5;

      grid-column-end: span 5;

    }

    .column-lg-6 {

      grid-column-start: span 6;

      grid-column-end: span 6;

    }

    .column-lg-7 {

      grid-column-start: span 7;

      grid-column-end: span 7;

    }

    .column-lg-8 {

      grid-column-start: span 8;

      grid-column-end: span 8;

    }

    .column-lg-9 {

      grid-column-start: span 9;

      grid-column-end: span 9;

    }

    .column-lg-10 {

      grid-column-start: span 10;

      grid-column-end: span 10;

    }

    .column-lg-11 {

      grid-column-start: span 11;

      grid-column-end: span 11;

    }

    .column-lg-12 {

      grid-column-start: span 12;

      grid-column-end: span 12;

    }

  }

}



* {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



*::before,

*::after {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



body {

  font-family: 'Barlow', sans-serif;

  font-size: 1.125rem;

  line-height: 1.5;

  color: #787878;

  background: #fff;

  text-rendering: optimizeLegibility;

}



ul li {

  margin: 0 1.5rem 0 0;

}



a {

  color: #787878;

  text-decoration: none;

  -webkit-transition: all 0.2s ease;

  -o-transition: all 0.2s ease;

  transition: all 0.2s ease;

}



a:hover {

  color: #2e2e2e;

}



a.active {

  color: #2e2e2e;

}



nav {

  padding: 2.5rem 0 2.5rem 0;

}



nav ul {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: left;

  -ms-flex-pack: left;

  justify-content: left;

}



nav li {

  font-size: 1.25rem;

}



nav li:nth-child(2) {

  margin: 0;

}



#highlight {

  color: #ea8478;

  font-size: 1.25rem;

}



.gallery {

  padding: 0 0 4rem 0;

}



.img-container {

  width: 100%;

  height: 500px;

  cursor: pointer;

  overflow: hidden;

}



.img-container:hover .img-content-hover {

  display: block;

}



.moto {

  width: 100%;

  height: 500px;

  -o-object-fit: cover;

  object-fit: cover;

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

  -webkit-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



.moto:hover {

  -webkit-transform: scale(1.05);

  -ms-transform: scale(1.05);

  transform: scale(1.05);

}



.img-content-hover {

  position: absolute;

  z-index: 1;

  white-space: nowrap;

  display: none;

  padding: 1rem;

  background: #fff;

  font-weight: 400;

  margin-top: 1.25rem;

  margin-left: -2rem;

}



.title {

  color: #2e2e2e;

  font-size: 1.5rem;

  font-weight: 700;

}



.category {

  font-size: 1rem;

  color: #787878;

}



.img-content {

  display: none;

}



.social,

.copyright {

  margin: 1rem;

}



.social li {

  display: inline-block;

}



footer {

  padding: 1rem 0;

  background: #23272A;

  text-align: center;

}



@supports (display: grid) {

  .gallery .grid {

    grid-gap: 1rem;

  }

}



@media (min-width: 62rem) {

  nav ul {

    -webkit-box-pack: right;

    -ms-flex-pack: right;

    justify-content: right;

  }

}



@media screen and (max-width: 1024px) {

  img:hover {

    -webkit-transform: none;

    -ms-transform: none;

    transform: none;

  }

  .img-container {

    height: 100%;

  }

  .img-container:hover .img-content-hover {

    display: none;

  }

  .img-content {

    display: block;

    padding: 1rem 0;

  }

}

<section class="gallery">

  <div class="container">

    <div class="grid">

      <div class="column-xs-12 column-md-4">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />

          <figcaption class="img-content">

            <h2 class="title">Smart Watch</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Smart Watch</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-4">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />

          <figcaption class="img-content">

            <h2 class="title">Camera Film</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Camera Film</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-4">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">

          <figcaption class="img-content">

            <h2 class="title">Coffee</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Coffee</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-6">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />

          <figcaption class="img-content">

            <h2 class="title">Phone</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Phone</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-6">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />

          <figcaption class="img-content">

            <h2 class="title">Keyboard</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Keyboard</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-4">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />

          <figcaption class="img-content">

            <h2 class="title">Smart Watch</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Smart Watch</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-4">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />

          <figcaption class="img-content">

            <h2 class="title">Camera Film</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Camera Film</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-4">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">

          <figcaption class="img-content">

            <h2 class="title">Coffee</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Coffee</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-6">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />

          <figcaption class="img-content">

            <h2 class="title">Phone</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Phone</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>

      <div class="column-xs-12 column-md-6">

        <figure class="img-container">

          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />

          <figcaption class="img-content">

            <h2 class="title">Keyboard</h2>

            <h3 class="category">Showcase</h3>

          </figcaption>

          <span class="img-content-hover">

                            <h2 class="title">Keyboard</h2>

                            <h3 class="category">Showcase</h3>

                        </span>

        </figure>

      </div>



    </div>

  </div>

</section>








html css html5 css3 css-grid







share|improve this question





























    1














    I'm trying to make the space between the rows equal to the columns gap
    but I really don't know what property is creating this gap between the rows. I tried fiddling around with grid gap to no success.



    Also when the screen size reduces the right margin disappears.



    Struggling to make this gallery work responsively.






    .container {
    
  margin: auto;
    
  padding: 0 1rem;
    
  max-width: 90rem;
    
  width: 100%;
    
}
    

    
.grid {
    
  display: -webkit-box;
    
  display: -ms-flexbox;
    
  display: flex;
    
  -webkit-box-orient: vertical;
    
  -webkit-box-direction: normal;
    
  -ms-flex-direction: column;
    
  flex-direction: column;
    
  -ms-flex-flow: row wrap;
    
  flex-flow: row wrap;
    
}
    

    
.grid>[class*="column-"] {
    
  display: block;
    
}
    

    
.first {
    
  -webkit-box-ordinal-group: 0;
    
  -ms-flex-order: -1;
    
  order: -1;
    
}
    

    
.last {
    
  -webkit-box-ordinal-group: 13;
    
  -ms-flex-order: 12;
    
  order: 12;
    
}
    

    
.align-top {
    
  -webkit-box-align: start;
    
  -ms-flex-align: start;
    
  align-items: start;
    
}
    

    
.align-center {
    
  -webkit-box-align: center;
    
  -ms-flex-align: center;
    
  align-items: center;
    
}
    

    
.align-bottom {
    
  -webkit-box-align: end;
    
  -ms-flex-align: end;
    
  align-items: end;
    
}
    

    
.column-xs-1 {
    
  -ms-flex-preferred-size: 8.3333333333%;
    
  flex-basis: 8.3333333333%;
    
  max-width: 8.3333333333%;
    
}
    

    
.column-xs-2 {
    
  -ms-flex-preferred-size: 16.6666666667%;
    
  flex-basis: 16.6666666667%;
    
  max-width: 16.6666666667%;
    
}
    

    
.column-xs-3 {
    
  -ms-flex-preferred-size: 25%;
    
  flex-basis: 25%;
    
  max-width: 25%;
    
}
    

    
.column-xs-4 {
    
  -ms-flex-preferred-size: 33.3333333333%;
    
  flex-basis: 33.3333333333%;
    
  max-width: 33.3333333333%;
    
}
    

    
.column-xs-5 {
    
  -ms-flex-preferred-size: 41.6666666667%;
    
  flex-basis: 41.6666666667%;
    
  max-width: 41.6666666667%;
    
}
    

    
.column-xs-6 {
    
  -ms-flex-preferred-size: 50%;
    
  flex-basis: 50%;
    
  max-width: 50%;
    
}
    

    
.column-xs-7 {
    
  -ms-flex-preferred-size: 58.3333333333%;
    
  flex-basis: 58.3333333333%;
    
  max-width: 58.3333333333%;
    
}
    

    
.column-xs-8 {
    
  -ms-flex-preferred-size: 66.6666666667%;
    
  flex-basis: 66.6666666667%;
    
  max-width: 66.6666666667%;
    
}
    

    
.column-xs-9 {
    
  -ms-flex-preferred-size: 75%;
    
  flex-basis: 75%;
    
  max-width: 75%;
    
}
    

    
.column-xs-10 {
    
  -ms-flex-preferred-size: 83.3333333333%;
    
  flex-basis: 83.3333333333%;
    
  max-width: 83.3333333333%;
    
}
    

    
.column-xs-11 {
    
  -ms-flex-preferred-size: 91.6666666667%;
    
  flex-basis: 91.6666666667%;
    
  max-width: 91.6666666667%;
    
}
    

    
.column-xs-12 {
    
  -ms-flex-preferred-size: 100%;
    
  flex-basis: 100%;
    
  max-width: 100%;
    
}
    

    
@media (min-width: 48rem) {
    
  .column-sm-1 {
    
    -ms-flex-preferred-size: 8.3333333333%;
    
    flex-basis: 8.3333333333%;
    
    max-width: 8.3333333333%;
    
  }
    
  .column-sm-2 {
    
    -ms-flex-preferred-size: 16.6666666667%;
    
    flex-basis: 16.6666666667%;
    
    max-width: 16.6666666667%;
    
  }
    
  .column-sm-3 {
    
    -ms-flex-preferred-size: 25%;
    
    flex-basis: 25%;
    
    max-width: 25%;
    
  }
    
  .column-sm-4 {
    
    -ms-flex-preferred-size: 33.3333333333%;
    
    flex-basis: 33.3333333333%;
    
    max-width: 33.3333333333%;
    
  }
    
  .column-sm-5 {
    
    -ms-flex-preferred-size: 41.6666666667%;
    
    flex-basis: 41.6666666667%;
    
    max-width: 41.6666666667%;
    
  }
    
  .column-sm-6 {
    
    -ms-flex-preferred-size: 50%;
    
    flex-basis: 50%;
    
    max-width: 50%;
    
  }
    
  .column-sm-7 {
    
    -ms-flex-preferred-size: 58.3333333333%;
    
    flex-basis: 58.3333333333%;
    
    max-width: 58.3333333333%;
    
  }
    
  .column-sm-8 {
    
    -ms-flex-preferred-size: 66.6666666667%;
    
    flex-basis: 66.6666666667%;
    
    max-width: 66.6666666667%;
    
  }
    
  .column-sm-9 {
    
    -ms-flex-preferred-size: 75%;
    
    flex-basis: 75%;
    
    max-width: 75%;
    
  }
    
  .column-sm-10 {
    
    -ms-flex-preferred-size: 83.3333333333%;
    
    flex-basis: 83.3333333333%;
    
    max-width: 83.3333333333%;
    
  }
    
  .column-sm-11 {
    
    -ms-flex-preferred-size: 91.6666666667%;
    
    flex-basis: 91.6666666667%;
    
    max-width: 91.6666666667%;
    
  }
    
  .column-sm-12 {
    
    -ms-flex-preferred-size: 100%;
    
    flex-basis: 100%;
    
    max-width: 100%;
    
  }
    
}
    

    
@media (min-width: 62rem) {
    
  .column-md-1 {
    
    -ms-flex-preferred-size: 8.3333333333%;
    
    flex-basis: 8.3333333333%;
    
    max-width: 8.3333333333%;
    
  }
    
  .column-md-2 {
    
    -ms-flex-preferred-size: 16.6666666667%;
    
    flex-basis: 16.6666666667%;
    
    max-width: 16.6666666667%;
    
  }
    
  .column-md-3 {
    
    -ms-flex-preferred-size: 25%;
    
    flex-basis: 25%;
    
    max-width: 25%;
    
  }
    
  .column-md-4 {
    
    -ms-flex-preferred-size: 33.3333333333%;
    
    flex-basis: 33.3333333333%;
    
    max-width: 33.3333333333%;
    
  }
    
  .column-md-5 {
    
    -ms-flex-preferred-size: 41.6666666667%;
    
    flex-basis: 41.6666666667%;
    
    max-width: 41.6666666667%;
    
  }
    
  .column-md-6 {
    
    -ms-flex-preferred-size: 50%;
    
    flex-basis: 50%;
    
    max-width: 50%;
    
  }
    
  .column-md-7 {
    
    -ms-flex-preferred-size: 58.3333333333%;
    
    flex-basis: 58.3333333333%;
    
    max-width: 58.3333333333%;
    
  }
    
  .column-md-8 {
    
    -ms-flex-preferred-size: 66.6666666667%;
    
    flex-basis: 66.6666666667%;
    
    max-width: 66.6666666667%;
    
  }
    
  .column-md-9 {
    
    -ms-flex-preferred-size: 75%;
    
    flex-basis: 75%;
    
    max-width: 75%;
    
  }
    
  .column-md-10 {
    
    -ms-flex-preferred-size: 83.3333333333%;
    
    flex-basis: 83.3333333333%;
    
    max-width: 83.3333333333%;
    
  }
    
  .column-md-11 {
    
    -ms-flex-preferred-size: 91.6666666667%;
    
    flex-basis: 91.6666666667%;
    
    max-width: 91.6666666667%;
    
  }
    
  .column-md-12 {
    
    -ms-flex-preferred-size: 100%;
    
    flex-basis: 100%;
    
    max-width: 100%;
    
  }
    
}
    

    
@media (min-width: 75rem) {
    
  .column-lg-1 {
    
    -ms-flex-preferred-size: 8.3333333333%;
    
    flex-basis: 8.3333333333%;
    
    max-width: 8.3333333333%;
    
  }
    
  .column-lg-2 {
    
    -ms-flex-preferred-size: 16.6666666667%;
    
    flex-basis: 16.6666666667%;
    
    max-width: 16.6666666667%;
    
  }
    
  .column-lg-3 {
    
    -ms-flex-preferred-size: 25%;
    
    flex-basis: 25%;
    
    max-width: 25%;
    
  }
    
  .column-lg-4 {
    
    -ms-flex-preferred-size: 33.3333333333%;
    
    flex-basis: 33.3333333333%;
    
    max-width: 33.3333333333%;
    
  }
    
  .column-lg-5 {
    
    -ms-flex-preferred-size: 41.6666666667%;
    
    flex-basis: 41.6666666667%;
    
    max-width: 41.6666666667%;
    
  }
    
  .column-lg-6 {
    
    -ms-flex-preferred-size: 50%;
    
    flex-basis: 50%;
    
    max-width: 50%;
    
  }
    
  .column-lg-7 {
    
    -ms-flex-preferred-size: 58.3333333333%;
    
    flex-basis: 58.3333333333%;
    
    max-width: 58.3333333333%;
    
  }
    
  .column-lg-8 {
    
    -ms-flex-preferred-size: 66.6666666667%;
    
    flex-basis: 66.6666666667%;
    
    max-width: 66.6666666667%;
    
  }
    
  .column-lg-9 {
    
    -ms-flex-preferred-size: 75%;
    
    flex-basis: 75%;
    
    max-width: 75%;
    
  }
    
  .column-lg-10 {
    
    -ms-flex-preferred-size: 83.3333333333%;
    
    flex-basis: 83.3333333333%;
    
    max-width: 83.3333333333%;
    
  }
    
  .column-lg-11 {
    
    -ms-flex-preferred-size: 91.6666666667%;
    
    flex-basis: 91.6666666667%;
    
    max-width: 91.6666666667%;
    
  }
    
  .column-lg-12 {
    
    -ms-flex-preferred-size: 100%;
    
    flex-basis: 100%;
    
    max-width: 100%;
    
  }
    
}
    

    
@supports (display: grid) {
    
  .grid {
    
    display: grid;
    
    grid-template-columns: repeat(12, 1fr);
    
    grid-template-rows: auto;
    
  }
    
  .grid>[class*="column-"] {
    
    margin: 0;
    
    max-width: 100%;
    
  }
    
  .column-xs-1 {
    
    grid-column-start: span 1;
    
    grid-column-end: span 1;
    
  }
    
  .column-xs-2 {
    
    grid-column-start: span 2;
    
    grid-column-end: span 2;
    
  }
    
  .column-xs-3 {
    
    grid-column-start: span 3;
    
    grid-column-end: span 3;
    
  }
    
  .column-xs-4 {
    
    grid-column-start: span 4;
    
    grid-column-end: span 4;
    
  }
    
  .column-xs-5 {
    
    grid-column-start: span 5;
    
    grid-column-end: span 5;
    
  }
    
  .column-xs-6 {
    
    grid-column-start: span 6;
    
    grid-column-end: span 6;
    
  }
    
  .column-xs-7 {
    
    grid-column-start: span 7;
    
    grid-column-end: span 7;
    
  }
    
  .column-xs-8 {
    
    grid-column-start: span 8;
    
    grid-column-end: span 8;
    
  }
    
  .column-xs-9 {
    
    grid-column-start: span 9;
    
    grid-column-end: span 9;
    
  }
    
  .column-xs-10 {
    
    grid-column-start: span 10;
    
    grid-column-end: span 10;
    
  }
    
  .column-xs-11 {
    
    grid-column-start: span 11;
    
    grid-column-end: span 11;
    
  }
    
  .column-xs-12 {
    
    grid-column-start: span 12;
    
    grid-column-end: span 12;
    
  }
    
  @media (min-width: 48rem) {
    
    .column-sm-1 {
    
      grid-column-start: span 1;
    
      grid-column-end: span 1;
    
    }
    
    .column-sm-2 {
    
      grid-column-start: span 2;
    
      grid-column-end: span 2;
    
    }
    
    .column-sm-3 {
    
      grid-column-start: span 3;
    
      grid-column-end: span 3;
    
    }
    
    .column-sm-4 {
    
      grid-column-start: span 4;
    
      grid-column-end: span 4;
    
    }
    
    .column-sm-5 {
    
      grid-column-start: span 5;
    
      grid-column-end: span 5;
    
    }
    
    .column-sm-6 {
    
      grid-column-start: span 6;
    
      grid-column-end: span 6;
    
    }
    
    .column-sm-7 {
    
      grid-column-start: span 7;
    
      grid-column-end: span 7;
    
    }
    
    .column-sm-8 {
    
      grid-column-start: span 8;
    
      grid-column-end: span 8;
    
    }
    
    .column-sm-9 {
    
      grid-column-start: span 9;
    
      grid-column-end: span 9;
    
    }
    
    .column-sm-10 {
    
      grid-column-start: span 10;
    
      grid-column-end: span 10;
    
    }
    
    .column-sm-11 {
    
      grid-column-start: span 11;
    
      grid-column-end: span 11;
    
    }
    
    .column-sm-12 {
    
      grid-column-start: span 12;
    
      grid-column-end: span 12;
    
    }
    
  }
    
  @media (min-width: 62rem) {
    
    .column-md-1 {
    
      grid-column-start: span 1;
    
      grid-column-end: span 1;
    
    }
    
    .column-md-2 {
    
      grid-column-start: span 2;
    
      grid-column-end: span 2;
    
    }
    
    .column-md-3 {
    
      grid-column-start: span 3;
    
      grid-column-end: span 3;
    
    }
    
    .column-md-4 {
    
      grid-column-start: span 4;
    
      grid-column-end: span 4;
    
    }
    
    .column-md-5 {
    
      grid-column-start: span 5;
    
      grid-column-end: span 5;
    
    }
    
    .column-md-6 {
    
      grid-column-start: span 6;
    
      grid-column-end: span 6;
    
    }
    
    .column-md-7 {
    
      grid-column-start: span 7;
    
      grid-column-end: span 7;
    
    }
    
    .column-md-8 {
    
      grid-column-start: span 8;
    
      grid-column-end: span 8;
    
    }
    
    .column-md-9 {
    
      grid-column-start: span 9;
    
      grid-column-end: span 9;
    
    }
    
    .column-md-10 {
    
      grid-column-start: span 10;
    
      grid-column-end: span 10;
    
    }
    
    .column-md-11 {
    
      grid-column-start: span 11;
    
      grid-column-end: span 11;
    
    }
    
    .column-md-12 {
    
      grid-column-start: span 12;
    
      grid-column-end: span 12;
    
    }
    
  }
    
  @media (min-width: 75rem) {
    
    .column-lg-1 {
    
      grid-column-start: span 1;
    
      grid-column-end: span 1;
    
    }
    
    .column-lg-2 {
    
      grid-column-start: span 2;
    
      grid-column-end: span 2;
    
    }
    
    .column-lg-3 {
    
      grid-column-start: span 3;
    
      grid-column-end: span 3;
    
    }
    
    .column-lg-4 {
    
      grid-column-start: span 4;
    
      grid-column-end: span 4;
    
    }
    
    .column-lg-5 {
    
      grid-column-start: span 5;
    
      grid-column-end: span 5;
    
    }
    
    .column-lg-6 {
    
      grid-column-start: span 6;
    
      grid-column-end: span 6;
    
    }
    
    .column-lg-7 {
    
      grid-column-start: span 7;
    
      grid-column-end: span 7;
    
    }
    
    .column-lg-8 {
    
      grid-column-start: span 8;
    
      grid-column-end: span 8;
    
    }
    
    .column-lg-9 {
    
      grid-column-start: span 9;
    
      grid-column-end: span 9;
    
    }
    
    .column-lg-10 {
    
      grid-column-start: span 10;
    
      grid-column-end: span 10;
    
    }
    
    .column-lg-11 {
    
      grid-column-start: span 11;
    
      grid-column-end: span 11;
    
    }
    
    .column-lg-12 {
    
      grid-column-start: span 12;
    
      grid-column-end: span 12;
    
    }
    
  }
    
}
    

    
* {
    
  -webkit-box-sizing: border-box;
    
  box-sizing: border-box;
    
}
    

    
*::before,
    
*::after {
    
  -webkit-box-sizing: border-box;
    
  box-sizing: border-box;
    
}
    

    
body {
    
  font-family: 'Barlow', sans-serif;
    
  font-size: 1.125rem;
    
  line-height: 1.5;
    
  color: #787878;
    
  background: #fff;
    
  text-rendering: optimizeLegibility;
    
}
    

    
ul li {
    
  margin: 0 1.5rem 0 0;
    
}
    

    
a {
    
  color: #787878;
    
  text-decoration: none;
    
  -webkit-transition: all 0.2s ease;
    
  -o-transition: all 0.2s ease;
    
  transition: all 0.2s ease;
    
}
    

    
a:hover {
    
  color: #2e2e2e;
    
}
    

    
a.active {
    
  color: #2e2e2e;
    
}
    

    
nav {
    
  padding: 2.5rem 0 2.5rem 0;
    
}
    

    
nav ul {
    
  display: -webkit-box;
    
  display: -ms-flexbox;
    
  display: flex;
    
  -webkit-box-pack: left;
    
  -ms-flex-pack: left;
    
  justify-content: left;
    
}
    

    
nav li {
    
  font-size: 1.25rem;
    
}
    

    
nav li:nth-child(2) {
    
  margin: 0;
    
}
    

    
#highlight {
    
  color: #ea8478;
    
  font-size: 1.25rem;
    
}
    

    
.gallery {
    
  padding: 0 0 4rem 0;
    
}
    

    
.img-container {
    
  width: 100%;
    
  height: 500px;
    
  cursor: pointer;
    
  overflow: hidden;
    
}
    

    
.img-container:hover .img-content-hover {
    
  display: block;
    
}
    

    
.moto {
    
  width: 100%;
    
  height: 500px;
    
  -o-object-fit: cover;
    
  object-fit: cover;
    
  -webkit-transform: scale(1);
    
  -ms-transform: scale(1);
    
  transform: scale(1);
    
  -webkit-transition: all 0.3s ease-in-out;
    
  -o-transition: all 0.3s ease-in-out;
    
  transition: all 0.3s ease-in-out;
    
}
    

    
.moto:hover {
    
  -webkit-transform: scale(1.05);
    
  -ms-transform: scale(1.05);
    
  transform: scale(1.05);
    
}
    

    
.img-content-hover {
    
  position: absolute;
    
  z-index: 1;
    
  white-space: nowrap;
    
  display: none;
    
  padding: 1rem;
    
  background: #fff;
    
  font-weight: 400;
    
  margin-top: 1.25rem;
    
  margin-left: -2rem;
    
}
    

    
.title {
    
  color: #2e2e2e;
    
  font-size: 1.5rem;
    
  font-weight: 700;
    
}
    

    
.category {
    
  font-size: 1rem;
    
  color: #787878;
    
}
    

    
.img-content {
    
  display: none;
    
}
    

    
.social,
    
.copyright {
    
  margin: 1rem;
    
}
    

    
.social li {
    
  display: inline-block;
    
}
    

    
footer {
    
  padding: 1rem 0;
    
  background: #23272A;
    
  text-align: center;
    
}
    

    
@supports (display: grid) {
    
  .gallery .grid {
    
    grid-gap: 1rem;
    
  }
    
}
    

    
@media (min-width: 62rem) {
    
  nav ul {
    
    -webkit-box-pack: right;
    
    -ms-flex-pack: right;
    
    justify-content: right;
    
  }
    
}
    

    
@media screen and (max-width: 1024px) {
    
  img:hover {
    
    -webkit-transform: none;
    
    -ms-transform: none;
    
    transform: none;
    
  }
    
  .img-container {
    
    height: 100%;
    
  }
    
  .img-container:hover .img-content-hover {
    
    display: none;
    
  }
    
  .img-content {
    
    display: block;
    
    padding: 1rem 0;
    
  }
    
}

    <section class="gallery">
    
  <div class="container">
    
    <div class="grid">
    
      <div class="column-xs-12 column-md-4">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Smart Watch</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Smart Watch</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-4">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Camera Film</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Camera Film</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-4">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
    
          <figcaption class="img-content">
    
            <h2 class="title">Coffee</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Coffee</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-6">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Phone</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Phone</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-6">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Keyboard</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Keyboard</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-4">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Smart Watch</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Smart Watch</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-4">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Camera Film</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Camera Film</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-4">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
    
          <figcaption class="img-content">
    
            <h2 class="title">Coffee</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Coffee</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-6">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Phone</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Phone</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    
      <div class="column-xs-12 column-md-6">
    
        <figure class="img-container">
    
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
    
          <figcaption class="img-content">
    
            <h2 class="title">Keyboard</h2>
    
            <h3 class="category">Showcase</h3>
    
          </figcaption>
    
          <span class="img-content-hover">
    
                            <h2 class="title">Keyboard</h2>
    
                            <h3 class="category">Showcase</h3>
    
                        </span>
    
        </figure>
    
      </div>
    

    
    </div>
    
  </div>
    
</section>








    html css html5 css3 css-grid







    share|improve this question



























      1












      1








      1







      I'm trying to make the space between the rows equal to the columns gap
      but I really don't know what property is creating this gap between the rows. I tried fiddling around with grid gap to no success.



      Also when the screen size reduces the right margin disappears.



      Struggling to make this gallery work responsively.






      .container {
      
  margin: auto;
      
  padding: 0 1rem;
      
  max-width: 90rem;
      
  width: 100%;
      
}
      

      
.grid {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  -ms-flex-flow: row wrap;
      
  flex-flow: row wrap;
      
}
      

      
.grid>[class*="column-"] {
      
  display: block;
      
}
      

      
.first {
      
  -webkit-box-ordinal-group: 0;
      
  -ms-flex-order: -1;
      
  order: -1;
      
}
      

      
.last {
      
  -webkit-box-ordinal-group: 13;
      
  -ms-flex-order: 12;
      
  order: 12;
      
}
      

      
.align-top {
      
  -webkit-box-align: start;
      
  -ms-flex-align: start;
      
  align-items: start;
      
}
      

      
.align-center {
      
  -webkit-box-align: center;
      
  -ms-flex-align: center;
      
  align-items: center;
      
}
      

      
.align-bottom {
      
  -webkit-box-align: end;
      
  -ms-flex-align: end;
      
  align-items: end;
      
}
      

      
.column-xs-1 {
      
  -ms-flex-preferred-size: 8.3333333333%;
      
  flex-basis: 8.3333333333%;
      
  max-width: 8.3333333333%;
      
}
      

      
.column-xs-2 {
      
  -ms-flex-preferred-size: 16.6666666667%;
      
  flex-basis: 16.6666666667%;
      
  max-width: 16.6666666667%;
      
}
      

      
.column-xs-3 {
      
  -ms-flex-preferred-size: 25%;
      
  flex-basis: 25%;
      
  max-width: 25%;
      
}
      

      
.column-xs-4 {
      
  -ms-flex-preferred-size: 33.3333333333%;
      
  flex-basis: 33.3333333333%;
      
  max-width: 33.3333333333%;
      
}
      

      
.column-xs-5 {
      
  -ms-flex-preferred-size: 41.6666666667%;
      
  flex-basis: 41.6666666667%;
      
  max-width: 41.6666666667%;
      
}
      

      
.column-xs-6 {
      
  -ms-flex-preferred-size: 50%;
      
  flex-basis: 50%;
      
  max-width: 50%;
      
}
      

      
.column-xs-7 {
      
  -ms-flex-preferred-size: 58.3333333333%;
      
  flex-basis: 58.3333333333%;
      
  max-width: 58.3333333333%;
      
}
      

      
.column-xs-8 {
      
  -ms-flex-preferred-size: 66.6666666667%;
      
  flex-basis: 66.6666666667%;
      
  max-width: 66.6666666667%;
      
}
      

      
.column-xs-9 {
      
  -ms-flex-preferred-size: 75%;
      
  flex-basis: 75%;
      
  max-width: 75%;
      
}
      

      
.column-xs-10 {
      
  -ms-flex-preferred-size: 83.3333333333%;
      
  flex-basis: 83.3333333333%;
      
  max-width: 83.3333333333%;
      
}
      

      
.column-xs-11 {
      
  -ms-flex-preferred-size: 91.6666666667%;
      
  flex-basis: 91.6666666667%;
      
  max-width: 91.6666666667%;
      
}
      

      
.column-xs-12 {
      
  -ms-flex-preferred-size: 100%;
      
  flex-basis: 100%;
      
  max-width: 100%;
      
}
      

      
@media (min-width: 48rem) {
      
  .column-sm-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-sm-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-sm-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-sm-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-sm-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-sm-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-sm-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-sm-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-sm-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-sm-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-sm-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-sm-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  .column-md-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-md-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-md-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-md-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-md-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-md-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-md-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-md-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-md-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-md-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-md-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-md-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 75rem) {
      
  .column-lg-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-lg-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-lg-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-lg-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-lg-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-lg-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-lg-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-lg-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-lg-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-lg-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-lg-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-lg-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@supports (display: grid) {
      
  .grid {
      
    display: grid;
      
    grid-template-columns: repeat(12, 1fr);
      
    grid-template-rows: auto;
      
  }
      
  .grid>[class*="column-"] {
      
    margin: 0;
      
    max-width: 100%;
      
  }
      
  .column-xs-1 {
      
    grid-column-start: span 1;
      
    grid-column-end: span 1;
      
  }
      
  .column-xs-2 {
      
    grid-column-start: span 2;
      
    grid-column-end: span 2;
      
  }
      
  .column-xs-3 {
      
    grid-column-start: span 3;
      
    grid-column-end: span 3;
      
  }
      
  .column-xs-4 {
      
    grid-column-start: span 4;
      
    grid-column-end: span 4;
      
  }
      
  .column-xs-5 {
      
    grid-column-start: span 5;
      
    grid-column-end: span 5;
      
  }
      
  .column-xs-6 {
      
    grid-column-start: span 6;
      
    grid-column-end: span 6;
      
  }
      
  .column-xs-7 {
      
    grid-column-start: span 7;
      
    grid-column-end: span 7;
      
  }
      
  .column-xs-8 {
      
    grid-column-start: span 8;
      
    grid-column-end: span 8;
      
  }
      
  .column-xs-9 {
      
    grid-column-start: span 9;
      
    grid-column-end: span 9;
      
  }
      
  .column-xs-10 {
      
    grid-column-start: span 10;
      
    grid-column-end: span 10;
      
  }
      
  .column-xs-11 {
      
    grid-column-start: span 11;
      
    grid-column-end: span 11;
      
  }
      
  .column-xs-12 {
      
    grid-column-start: span 12;
      
    grid-column-end: span 12;
      
  }
      
  @media (min-width: 48rem) {
      
    .column-sm-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-sm-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-sm-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-sm-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-sm-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-sm-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-sm-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-sm-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-sm-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-sm-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-sm-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-sm-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 62rem) {
      
    .column-md-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-md-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-md-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-md-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-md-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-md-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-md-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-md-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-md-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-md-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-md-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-md-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 75rem) {
      
    .column-lg-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-lg-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-lg-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-lg-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-lg-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-lg-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-lg-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-lg-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-lg-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-lg-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-lg-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-lg-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
}
      

      
* {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
*::before,
      
*::after {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
body {
      
  font-family: 'Barlow', sans-serif;
      
  font-size: 1.125rem;
      
  line-height: 1.5;
      
  color: #787878;
      
  background: #fff;
      
  text-rendering: optimizeLegibility;
      
}
      

      
ul li {
      
  margin: 0 1.5rem 0 0;
      
}
      

      
a {
      
  color: #787878;
      
  text-decoration: none;
      
  -webkit-transition: all 0.2s ease;
      
  -o-transition: all 0.2s ease;
      
  transition: all 0.2s ease;
      
}
      

      
a:hover {
      
  color: #2e2e2e;
      
}
      

      
a.active {
      
  color: #2e2e2e;
      
}
      

      
nav {
      
  padding: 2.5rem 0 2.5rem 0;
      
}
      

      
nav ul {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-pack: left;
      
  -ms-flex-pack: left;
      
  justify-content: left;
      
}
      

      
nav li {
      
  font-size: 1.25rem;
      
}
      

      
nav li:nth-child(2) {
      
  margin: 0;
      
}
      

      
#highlight {
      
  color: #ea8478;
      
  font-size: 1.25rem;
      
}
      

      
.gallery {
      
  padding: 0 0 4rem 0;
      
}
      

      
.img-container {
      
  width: 100%;
      
  height: 500px;
      
  cursor: pointer;
      
  overflow: hidden;
      
}
      

      
.img-container:hover .img-content-hover {
      
  display: block;
      
}
      

      
.moto {
      
  width: 100%;
      
  height: 500px;
      
  -o-object-fit: cover;
      
  object-fit: cover;
      
  -webkit-transform: scale(1);
      
  -ms-transform: scale(1);
      
  transform: scale(1);
      
  -webkit-transition: all 0.3s ease-in-out;
      
  -o-transition: all 0.3s ease-in-out;
      
  transition: all 0.3s ease-in-out;
      
}
      

      
.moto:hover {
      
  -webkit-transform: scale(1.05);
      
  -ms-transform: scale(1.05);
      
  transform: scale(1.05);
      
}
      

      
.img-content-hover {
      
  position: absolute;
      
  z-index: 1;
      
  white-space: nowrap;
      
  display: none;
      
  padding: 1rem;
      
  background: #fff;
      
  font-weight: 400;
      
  margin-top: 1.25rem;
      
  margin-left: -2rem;
      
}
      

      
.title {
      
  color: #2e2e2e;
      
  font-size: 1.5rem;
      
  font-weight: 700;
      
}
      

      
.category {
      
  font-size: 1rem;
      
  color: #787878;
      
}
      

      
.img-content {
      
  display: none;
      
}
      

      
.social,
      
.copyright {
      
  margin: 1rem;
      
}
      

      
.social li {
      
  display: inline-block;
      
}
      

      
footer {
      
  padding: 1rem 0;
      
  background: #23272A;
      
  text-align: center;
      
}
      

      
@supports (display: grid) {
      
  .gallery .grid {
      
    grid-gap: 1rem;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  nav ul {
      
    -webkit-box-pack: right;
      
    -ms-flex-pack: right;
      
    justify-content: right;
      
  }
      
}
      

      
@media screen and (max-width: 1024px) {
      
  img:hover {
      
    -webkit-transform: none;
      
    -ms-transform: none;
      
    transform: none;
      
  }
      
  .img-container {
      
    height: 100%;
      
  }
      
  .img-container:hover .img-content-hover {
      
    display: none;
      
  }
      
  .img-content {
      
    display: block;
      
    padding: 1rem 0;
      
  }
      
}

      <section class="gallery">
      
  <div class="container">
      
    <div class="grid">
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      

      
    </div>
      
  </div>
      
</section>








      html css html5 css3 css-grid







      share|improve this question















      I'm trying to make the space between the rows equal to the columns gap
      but I really don't know what property is creating this gap between the rows. I tried fiddling around with grid gap to no success.



      Also when the screen size reduces the right margin disappears.



      Struggling to make this gallery work responsively.






      .container {
      
  margin: auto;
      
  padding: 0 1rem;
      
  max-width: 90rem;
      
  width: 100%;
      
}
      

      
.grid {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  -ms-flex-flow: row wrap;
      
  flex-flow: row wrap;
      
}
      

      
.grid>[class*="column-"] {
      
  display: block;
      
}
      

      
.first {
      
  -webkit-box-ordinal-group: 0;
      
  -ms-flex-order: -1;
      
  order: -1;
      
}
      

      
.last {
      
  -webkit-box-ordinal-group: 13;
      
  -ms-flex-order: 12;
      
  order: 12;
      
}
      

      
.align-top {
      
  -webkit-box-align: start;
      
  -ms-flex-align: start;
      
  align-items: start;
      
}
      

      
.align-center {
      
  -webkit-box-align: center;
      
  -ms-flex-align: center;
      
  align-items: center;
      
}
      

      
.align-bottom {
      
  -webkit-box-align: end;
      
  -ms-flex-align: end;
      
  align-items: end;
      
}
      

      
.column-xs-1 {
      
  -ms-flex-preferred-size: 8.3333333333%;
      
  flex-basis: 8.3333333333%;
      
  max-width: 8.3333333333%;
      
}
      

      
.column-xs-2 {
      
  -ms-flex-preferred-size: 16.6666666667%;
      
  flex-basis: 16.6666666667%;
      
  max-width: 16.6666666667%;
      
}
      

      
.column-xs-3 {
      
  -ms-flex-preferred-size: 25%;
      
  flex-basis: 25%;
      
  max-width: 25%;
      
}
      

      
.column-xs-4 {
      
  -ms-flex-preferred-size: 33.3333333333%;
      
  flex-basis: 33.3333333333%;
      
  max-width: 33.3333333333%;
      
}
      

      
.column-xs-5 {
      
  -ms-flex-preferred-size: 41.6666666667%;
      
  flex-basis: 41.6666666667%;
      
  max-width: 41.6666666667%;
      
}
      

      
.column-xs-6 {
      
  -ms-flex-preferred-size: 50%;
      
  flex-basis: 50%;
      
  max-width: 50%;
      
}
      

      
.column-xs-7 {
      
  -ms-flex-preferred-size: 58.3333333333%;
      
  flex-basis: 58.3333333333%;
      
  max-width: 58.3333333333%;
      
}
      

      
.column-xs-8 {
      
  -ms-flex-preferred-size: 66.6666666667%;
      
  flex-basis: 66.6666666667%;
      
  max-width: 66.6666666667%;
      
}
      

      
.column-xs-9 {
      
  -ms-flex-preferred-size: 75%;
      
  flex-basis: 75%;
      
  max-width: 75%;
      
}
      

      
.column-xs-10 {
      
  -ms-flex-preferred-size: 83.3333333333%;
      
  flex-basis: 83.3333333333%;
      
  max-width: 83.3333333333%;
      
}
      

      
.column-xs-11 {
      
  -ms-flex-preferred-size: 91.6666666667%;
      
  flex-basis: 91.6666666667%;
      
  max-width: 91.6666666667%;
      
}
      

      
.column-xs-12 {
      
  -ms-flex-preferred-size: 100%;
      
  flex-basis: 100%;
      
  max-width: 100%;
      
}
      

      
@media (min-width: 48rem) {
      
  .column-sm-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-sm-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-sm-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-sm-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-sm-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-sm-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-sm-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-sm-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-sm-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-sm-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-sm-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-sm-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  .column-md-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-md-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-md-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-md-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-md-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-md-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-md-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-md-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-md-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-md-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-md-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-md-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 75rem) {
      
  .column-lg-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-lg-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-lg-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-lg-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-lg-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-lg-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-lg-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-lg-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-lg-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-lg-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-lg-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-lg-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@supports (display: grid) {
      
  .grid {
      
    display: grid;
      
    grid-template-columns: repeat(12, 1fr);
      
    grid-template-rows: auto;
      
  }
      
  .grid>[class*="column-"] {
      
    margin: 0;
      
    max-width: 100%;
      
  }
      
  .column-xs-1 {
      
    grid-column-start: span 1;
      
    grid-column-end: span 1;
      
  }
      
  .column-xs-2 {
      
    grid-column-start: span 2;
      
    grid-column-end: span 2;
      
  }
      
  .column-xs-3 {
      
    grid-column-start: span 3;
      
    grid-column-end: span 3;
      
  }
      
  .column-xs-4 {
      
    grid-column-start: span 4;
      
    grid-column-end: span 4;
      
  }
      
  .column-xs-5 {
      
    grid-column-start: span 5;
      
    grid-column-end: span 5;
      
  }
      
  .column-xs-6 {
      
    grid-column-start: span 6;
      
    grid-column-end: span 6;
      
  }
      
  .column-xs-7 {
      
    grid-column-start: span 7;
      
    grid-column-end: span 7;
      
  }
      
  .column-xs-8 {
      
    grid-column-start: span 8;
      
    grid-column-end: span 8;
      
  }
      
  .column-xs-9 {
      
    grid-column-start: span 9;
      
    grid-column-end: span 9;
      
  }
      
  .column-xs-10 {
      
    grid-column-start: span 10;
      
    grid-column-end: span 10;
      
  }
      
  .column-xs-11 {
      
    grid-column-start: span 11;
      
    grid-column-end: span 11;
      
  }
      
  .column-xs-12 {
      
    grid-column-start: span 12;
      
    grid-column-end: span 12;
      
  }
      
  @media (min-width: 48rem) {
      
    .column-sm-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-sm-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-sm-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-sm-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-sm-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-sm-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-sm-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-sm-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-sm-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-sm-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-sm-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-sm-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 62rem) {
      
    .column-md-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-md-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-md-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-md-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-md-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-md-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-md-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-md-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-md-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-md-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-md-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-md-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 75rem) {
      
    .column-lg-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-lg-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-lg-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-lg-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-lg-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-lg-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-lg-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-lg-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-lg-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-lg-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-lg-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-lg-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
}
      

      
* {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
*::before,
      
*::after {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
body {
      
  font-family: 'Barlow', sans-serif;
      
  font-size: 1.125rem;
      
  line-height: 1.5;
      
  color: #787878;
      
  background: #fff;
      
  text-rendering: optimizeLegibility;
      
}
      

      
ul li {
      
  margin: 0 1.5rem 0 0;
      
}
      

      
a {
      
  color: #787878;
      
  text-decoration: none;
      
  -webkit-transition: all 0.2s ease;
      
  -o-transition: all 0.2s ease;
      
  transition: all 0.2s ease;
      
}
      

      
a:hover {
      
  color: #2e2e2e;
      
}
      

      
a.active {
      
  color: #2e2e2e;
      
}
      

      
nav {
      
  padding: 2.5rem 0 2.5rem 0;
      
}
      

      
nav ul {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-pack: left;
      
  -ms-flex-pack: left;
      
  justify-content: left;
      
}
      

      
nav li {
      
  font-size: 1.25rem;
      
}
      

      
nav li:nth-child(2) {
      
  margin: 0;
      
}
      

      
#highlight {
      
  color: #ea8478;
      
  font-size: 1.25rem;
      
}
      

      
.gallery {
      
  padding: 0 0 4rem 0;
      
}
      

      
.img-container {
      
  width: 100%;
      
  height: 500px;
      
  cursor: pointer;
      
  overflow: hidden;
      
}
      

      
.img-container:hover .img-content-hover {
      
  display: block;
      
}
      

      
.moto {
      
  width: 100%;
      
  height: 500px;
      
  -o-object-fit: cover;
      
  object-fit: cover;
      
  -webkit-transform: scale(1);
      
  -ms-transform: scale(1);
      
  transform: scale(1);
      
  -webkit-transition: all 0.3s ease-in-out;
      
  -o-transition: all 0.3s ease-in-out;
      
  transition: all 0.3s ease-in-out;
      
}
      

      
.moto:hover {
      
  -webkit-transform: scale(1.05);
      
  -ms-transform: scale(1.05);
      
  transform: scale(1.05);
      
}
      

      
.img-content-hover {
      
  position: absolute;
      
  z-index: 1;
      
  white-space: nowrap;
      
  display: none;
      
  padding: 1rem;
      
  background: #fff;
      
  font-weight: 400;
      
  margin-top: 1.25rem;
      
  margin-left: -2rem;
      
}
      

      
.title {
      
  color: #2e2e2e;
      
  font-size: 1.5rem;
      
  font-weight: 700;
      
}
      

      
.category {
      
  font-size: 1rem;
      
  color: #787878;
      
}
      

      
.img-content {
      
  display: none;
      
}
      

      
.social,
      
.copyright {
      
  margin: 1rem;
      
}
      

      
.social li {
      
  display: inline-block;
      
}
      

      
footer {
      
  padding: 1rem 0;
      
  background: #23272A;
      
  text-align: center;
      
}
      

      
@supports (display: grid) {
      
  .gallery .grid {
      
    grid-gap: 1rem;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  nav ul {
      
    -webkit-box-pack: right;
      
    -ms-flex-pack: right;
      
    justify-content: right;
      
  }
      
}
      

      
@media screen and (max-width: 1024px) {
      
  img:hover {
      
    -webkit-transform: none;
      
    -ms-transform: none;
      
    transform: none;
      
  }
      
  .img-container {
      
    height: 100%;
      
  }
      
  .img-container:hover .img-content-hover {
      
    display: none;
      
  }
      
  .img-content {
      
    display: block;
      
    padding: 1rem 0;
      
  }
      
}

      <section class="gallery">
      
  <div class="container">
      
    <div class="grid">
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      

      
    </div>
      
  </div>
      
</section>








      .container {
      
  margin: auto;
      
  padding: 0 1rem;
      
  max-width: 90rem;
      
  width: 100%;
      
}
      

      
.grid {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  -ms-flex-flow: row wrap;
      
  flex-flow: row wrap;
      
}
      

      
.grid>[class*="column-"] {
      
  display: block;
      
}
      

      
.first {
      
  -webkit-box-ordinal-group: 0;
      
  -ms-flex-order: -1;
      
  order: -1;
      
}
      

      
.last {
      
  -webkit-box-ordinal-group: 13;
      
  -ms-flex-order: 12;
      
  order: 12;
      
}
      

      
.align-top {
      
  -webkit-box-align: start;
      
  -ms-flex-align: start;
      
  align-items: start;
      
}
      

      
.align-center {
      
  -webkit-box-align: center;
      
  -ms-flex-align: center;
      
  align-items: center;
      
}
      

      
.align-bottom {
      
  -webkit-box-align: end;
      
  -ms-flex-align: end;
      
  align-items: end;
      
}
      

      
.column-xs-1 {
      
  -ms-flex-preferred-size: 8.3333333333%;
      
  flex-basis: 8.3333333333%;
      
  max-width: 8.3333333333%;
      
}
      

      
.column-xs-2 {
      
  -ms-flex-preferred-size: 16.6666666667%;
      
  flex-basis: 16.6666666667%;
      
  max-width: 16.6666666667%;
      
}
      

      
.column-xs-3 {
      
  -ms-flex-preferred-size: 25%;
      
  flex-basis: 25%;
      
  max-width: 25%;
      
}
      

      
.column-xs-4 {
      
  -ms-flex-preferred-size: 33.3333333333%;
      
  flex-basis: 33.3333333333%;
      
  max-width: 33.3333333333%;
      
}
      

      
.column-xs-5 {
      
  -ms-flex-preferred-size: 41.6666666667%;
      
  flex-basis: 41.6666666667%;
      
  max-width: 41.6666666667%;
      
}
      

      
.column-xs-6 {
      
  -ms-flex-preferred-size: 50%;
      
  flex-basis: 50%;
      
  max-width: 50%;
      
}
      

      
.column-xs-7 {
      
  -ms-flex-preferred-size: 58.3333333333%;
      
  flex-basis: 58.3333333333%;
      
  max-width: 58.3333333333%;
      
}
      

      
.column-xs-8 {
      
  -ms-flex-preferred-size: 66.6666666667%;
      
  flex-basis: 66.6666666667%;
      
  max-width: 66.6666666667%;
      
}
      

      
.column-xs-9 {
      
  -ms-flex-preferred-size: 75%;
      
  flex-basis: 75%;
      
  max-width: 75%;
      
}
      

      
.column-xs-10 {
      
  -ms-flex-preferred-size: 83.3333333333%;
      
  flex-basis: 83.3333333333%;
      
  max-width: 83.3333333333%;
      
}
      

      
.column-xs-11 {
      
  -ms-flex-preferred-size: 91.6666666667%;
      
  flex-basis: 91.6666666667%;
      
  max-width: 91.6666666667%;
      
}
      

      
.column-xs-12 {
      
  -ms-flex-preferred-size: 100%;
      
  flex-basis: 100%;
      
  max-width: 100%;
      
}
      

      
@media (min-width: 48rem) {
      
  .column-sm-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-sm-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-sm-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-sm-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-sm-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-sm-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-sm-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-sm-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-sm-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-sm-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-sm-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-sm-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  .column-md-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-md-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-md-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-md-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-md-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-md-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-md-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-md-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-md-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-md-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-md-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-md-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 75rem) {
      
  .column-lg-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-lg-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-lg-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-lg-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-lg-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-lg-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-lg-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-lg-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-lg-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-lg-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-lg-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-lg-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@supports (display: grid) {
      
  .grid {
      
    display: grid;
      
    grid-template-columns: repeat(12, 1fr);
      
    grid-template-rows: auto;
      
  }
      
  .grid>[class*="column-"] {
      
    margin: 0;
      
    max-width: 100%;
      
  }
      
  .column-xs-1 {
      
    grid-column-start: span 1;
      
    grid-column-end: span 1;
      
  }
      
  .column-xs-2 {
      
    grid-column-start: span 2;
      
    grid-column-end: span 2;
      
  }
      
  .column-xs-3 {
      
    grid-column-start: span 3;
      
    grid-column-end: span 3;
      
  }
      
  .column-xs-4 {
      
    grid-column-start: span 4;
      
    grid-column-end: span 4;
      
  }
      
  .column-xs-5 {
      
    grid-column-start: span 5;
      
    grid-column-end: span 5;
      
  }
      
  .column-xs-6 {
      
    grid-column-start: span 6;
      
    grid-column-end: span 6;
      
  }
      
  .column-xs-7 {
      
    grid-column-start: span 7;
      
    grid-column-end: span 7;
      
  }
      
  .column-xs-8 {
      
    grid-column-start: span 8;
      
    grid-column-end: span 8;
      
  }
      
  .column-xs-9 {
      
    grid-column-start: span 9;
      
    grid-column-end: span 9;
      
  }
      
  .column-xs-10 {
      
    grid-column-start: span 10;
      
    grid-column-end: span 10;
      
  }
      
  .column-xs-11 {
      
    grid-column-start: span 11;
      
    grid-column-end: span 11;
      
  }
      
  .column-xs-12 {
      
    grid-column-start: span 12;
      
    grid-column-end: span 12;
      
  }
      
  @media (min-width: 48rem) {
      
    .column-sm-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-sm-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-sm-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-sm-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-sm-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-sm-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-sm-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-sm-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-sm-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-sm-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-sm-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-sm-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 62rem) {
      
    .column-md-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-md-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-md-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-md-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-md-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-md-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-md-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-md-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-md-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-md-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-md-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-md-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 75rem) {
      
    .column-lg-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-lg-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-lg-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-lg-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-lg-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-lg-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-lg-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-lg-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-lg-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-lg-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-lg-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-lg-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
}
      

      
* {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
*::before,
      
*::after {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
body {
      
  font-family: 'Barlow', sans-serif;
      
  font-size: 1.125rem;
      
  line-height: 1.5;
      
  color: #787878;
      
  background: #fff;
      
  text-rendering: optimizeLegibility;
      
}
      

      
ul li {
      
  margin: 0 1.5rem 0 0;
      
}
      

      
a {
      
  color: #787878;
      
  text-decoration: none;
      
  -webkit-transition: all 0.2s ease;
      
  -o-transition: all 0.2s ease;
      
  transition: all 0.2s ease;
      
}
      

      
a:hover {
      
  color: #2e2e2e;
      
}
      

      
a.active {
      
  color: #2e2e2e;
      
}
      

      
nav {
      
  padding: 2.5rem 0 2.5rem 0;
      
}
      

      
nav ul {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-pack: left;
      
  -ms-flex-pack: left;
      
  justify-content: left;
      
}
      

      
nav li {
      
  font-size: 1.25rem;
      
}
      

      
nav li:nth-child(2) {
      
  margin: 0;
      
}
      

      
#highlight {
      
  color: #ea8478;
      
  font-size: 1.25rem;
      
}
      

      
.gallery {
      
  padding: 0 0 4rem 0;
      
}
      

      
.img-container {
      
  width: 100%;
      
  height: 500px;
      
  cursor: pointer;
      
  overflow: hidden;
      
}
      

      
.img-container:hover .img-content-hover {
      
  display: block;
      
}
      

      
.moto {
      
  width: 100%;
      
  height: 500px;
      
  -o-object-fit: cover;
      
  object-fit: cover;
      
  -webkit-transform: scale(1);
      
  -ms-transform: scale(1);
      
  transform: scale(1);
      
  -webkit-transition: all 0.3s ease-in-out;
      
  -o-transition: all 0.3s ease-in-out;
      
  transition: all 0.3s ease-in-out;
      
}
      

      
.moto:hover {
      
  -webkit-transform: scale(1.05);
      
  -ms-transform: scale(1.05);
      
  transform: scale(1.05);
      
}
      

      
.img-content-hover {
      
  position: absolute;
      
  z-index: 1;
      
  white-space: nowrap;
      
  display: none;
      
  padding: 1rem;
      
  background: #fff;
      
  font-weight: 400;
      
  margin-top: 1.25rem;
      
  margin-left: -2rem;
      
}
      

      
.title {
      
  color: #2e2e2e;
      
  font-size: 1.5rem;
      
  font-weight: 700;
      
}
      

      
.category {
      
  font-size: 1rem;
      
  color: #787878;
      
}
      

      
.img-content {
      
  display: none;
      
}
      

      
.social,
      
.copyright {
      
  margin: 1rem;
      
}
      

      
.social li {
      
  display: inline-block;
      
}
      

      
footer {
      
  padding: 1rem 0;
      
  background: #23272A;
      
  text-align: center;
      
}
      

      
@supports (display: grid) {
      
  .gallery .grid {
      
    grid-gap: 1rem;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  nav ul {
      
    -webkit-box-pack: right;
      
    -ms-flex-pack: right;
      
    justify-content: right;
      
  }
      
}
      

      
@media screen and (max-width: 1024px) {
      
  img:hover {
      
    -webkit-transform: none;
      
    -ms-transform: none;
      
    transform: none;
      
  }
      
  .img-container {
      
    height: 100%;
      
  }
      
  .img-container:hover .img-content-hover {
      
    display: none;
      
  }
      
  .img-content {
      
    display: block;
      
    padding: 1rem 0;
      
  }
      
}

      <section class="gallery">
      
  <div class="container">
      
    <div class="grid">
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      

      
    </div>
      
  </div>
      
</section>





      .container {
      
  margin: auto;
      
  padding: 0 1rem;
      
  max-width: 90rem;
      
  width: 100%;
      
}
      

      
.grid {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-orient: vertical;
      
  -webkit-box-direction: normal;
      
  -ms-flex-direction: column;
      
  flex-direction: column;
      
  -ms-flex-flow: row wrap;
      
  flex-flow: row wrap;
      
}
      

      
.grid>[class*="column-"] {
      
  display: block;
      
}
      

      
.first {
      
  -webkit-box-ordinal-group: 0;
      
  -ms-flex-order: -1;
      
  order: -1;
      
}
      

      
.last {
      
  -webkit-box-ordinal-group: 13;
      
  -ms-flex-order: 12;
      
  order: 12;
      
}
      

      
.align-top {
      
  -webkit-box-align: start;
      
  -ms-flex-align: start;
      
  align-items: start;
      
}
      

      
.align-center {
      
  -webkit-box-align: center;
      
  -ms-flex-align: center;
      
  align-items: center;
      
}
      

      
.align-bottom {
      
  -webkit-box-align: end;
      
  -ms-flex-align: end;
      
  align-items: end;
      
}
      

      
.column-xs-1 {
      
  -ms-flex-preferred-size: 8.3333333333%;
      
  flex-basis: 8.3333333333%;
      
  max-width: 8.3333333333%;
      
}
      

      
.column-xs-2 {
      
  -ms-flex-preferred-size: 16.6666666667%;
      
  flex-basis: 16.6666666667%;
      
  max-width: 16.6666666667%;
      
}
      

      
.column-xs-3 {
      
  -ms-flex-preferred-size: 25%;
      
  flex-basis: 25%;
      
  max-width: 25%;
      
}
      

      
.column-xs-4 {
      
  -ms-flex-preferred-size: 33.3333333333%;
      
  flex-basis: 33.3333333333%;
      
  max-width: 33.3333333333%;
      
}
      

      
.column-xs-5 {
      
  -ms-flex-preferred-size: 41.6666666667%;
      
  flex-basis: 41.6666666667%;
      
  max-width: 41.6666666667%;
      
}
      

      
.column-xs-6 {
      
  -ms-flex-preferred-size: 50%;
      
  flex-basis: 50%;
      
  max-width: 50%;
      
}
      

      
.column-xs-7 {
      
  -ms-flex-preferred-size: 58.3333333333%;
      
  flex-basis: 58.3333333333%;
      
  max-width: 58.3333333333%;
      
}
      

      
.column-xs-8 {
      
  -ms-flex-preferred-size: 66.6666666667%;
      
  flex-basis: 66.6666666667%;
      
  max-width: 66.6666666667%;
      
}
      

      
.column-xs-9 {
      
  -ms-flex-preferred-size: 75%;
      
  flex-basis: 75%;
      
  max-width: 75%;
      
}
      

      
.column-xs-10 {
      
  -ms-flex-preferred-size: 83.3333333333%;
      
  flex-basis: 83.3333333333%;
      
  max-width: 83.3333333333%;
      
}
      

      
.column-xs-11 {
      
  -ms-flex-preferred-size: 91.6666666667%;
      
  flex-basis: 91.6666666667%;
      
  max-width: 91.6666666667%;
      
}
      

      
.column-xs-12 {
      
  -ms-flex-preferred-size: 100%;
      
  flex-basis: 100%;
      
  max-width: 100%;
      
}
      

      
@media (min-width: 48rem) {
      
  .column-sm-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-sm-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-sm-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-sm-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-sm-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-sm-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-sm-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-sm-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-sm-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-sm-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-sm-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-sm-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  .column-md-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-md-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-md-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-md-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-md-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-md-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-md-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-md-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-md-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-md-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-md-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-md-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@media (min-width: 75rem) {
      
  .column-lg-1 {
      
    -ms-flex-preferred-size: 8.3333333333%;
      
    flex-basis: 8.3333333333%;
      
    max-width: 8.3333333333%;
      
  }
      
  .column-lg-2 {
      
    -ms-flex-preferred-size: 16.6666666667%;
      
    flex-basis: 16.6666666667%;
      
    max-width: 16.6666666667%;
      
  }
      
  .column-lg-3 {
      
    -ms-flex-preferred-size: 25%;
      
    flex-basis: 25%;
      
    max-width: 25%;
      
  }
      
  .column-lg-4 {
      
    -ms-flex-preferred-size: 33.3333333333%;
      
    flex-basis: 33.3333333333%;
      
    max-width: 33.3333333333%;
      
  }
      
  .column-lg-5 {
      
    -ms-flex-preferred-size: 41.6666666667%;
      
    flex-basis: 41.6666666667%;
      
    max-width: 41.6666666667%;
      
  }
      
  .column-lg-6 {
      
    -ms-flex-preferred-size: 50%;
      
    flex-basis: 50%;
      
    max-width: 50%;
      
  }
      
  .column-lg-7 {
      
    -ms-flex-preferred-size: 58.3333333333%;
      
    flex-basis: 58.3333333333%;
      
    max-width: 58.3333333333%;
      
  }
      
  .column-lg-8 {
      
    -ms-flex-preferred-size: 66.6666666667%;
      
    flex-basis: 66.6666666667%;
      
    max-width: 66.6666666667%;
      
  }
      
  .column-lg-9 {
      
    -ms-flex-preferred-size: 75%;
      
    flex-basis: 75%;
      
    max-width: 75%;
      
  }
      
  .column-lg-10 {
      
    -ms-flex-preferred-size: 83.3333333333%;
      
    flex-basis: 83.3333333333%;
      
    max-width: 83.3333333333%;
      
  }
      
  .column-lg-11 {
      
    -ms-flex-preferred-size: 91.6666666667%;
      
    flex-basis: 91.6666666667%;
      
    max-width: 91.6666666667%;
      
  }
      
  .column-lg-12 {
      
    -ms-flex-preferred-size: 100%;
      
    flex-basis: 100%;
      
    max-width: 100%;
      
  }
      
}
      

      
@supports (display: grid) {
      
  .grid {
      
    display: grid;
      
    grid-template-columns: repeat(12, 1fr);
      
    grid-template-rows: auto;
      
  }
      
  .grid>[class*="column-"] {
      
    margin: 0;
      
    max-width: 100%;
      
  }
      
  .column-xs-1 {
      
    grid-column-start: span 1;
      
    grid-column-end: span 1;
      
  }
      
  .column-xs-2 {
      
    grid-column-start: span 2;
      
    grid-column-end: span 2;
      
  }
      
  .column-xs-3 {
      
    grid-column-start: span 3;
      
    grid-column-end: span 3;
      
  }
      
  .column-xs-4 {
      
    grid-column-start: span 4;
      
    grid-column-end: span 4;
      
  }
      
  .column-xs-5 {
      
    grid-column-start: span 5;
      
    grid-column-end: span 5;
      
  }
      
  .column-xs-6 {
      
    grid-column-start: span 6;
      
    grid-column-end: span 6;
      
  }
      
  .column-xs-7 {
      
    grid-column-start: span 7;
      
    grid-column-end: span 7;
      
  }
      
  .column-xs-8 {
      
    grid-column-start: span 8;
      
    grid-column-end: span 8;
      
  }
      
  .column-xs-9 {
      
    grid-column-start: span 9;
      
    grid-column-end: span 9;
      
  }
      
  .column-xs-10 {
      
    grid-column-start: span 10;
      
    grid-column-end: span 10;
      
  }
      
  .column-xs-11 {
      
    grid-column-start: span 11;
      
    grid-column-end: span 11;
      
  }
      
  .column-xs-12 {
      
    grid-column-start: span 12;
      
    grid-column-end: span 12;
      
  }
      
  @media (min-width: 48rem) {
      
    .column-sm-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-sm-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-sm-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-sm-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-sm-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-sm-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-sm-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-sm-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-sm-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-sm-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-sm-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-sm-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 62rem) {
      
    .column-md-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-md-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-md-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-md-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-md-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-md-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-md-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-md-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-md-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-md-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-md-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-md-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
  @media (min-width: 75rem) {
      
    .column-lg-1 {
      
      grid-column-start: span 1;
      
      grid-column-end: span 1;
      
    }
      
    .column-lg-2 {
      
      grid-column-start: span 2;
      
      grid-column-end: span 2;
      
    }
      
    .column-lg-3 {
      
      grid-column-start: span 3;
      
      grid-column-end: span 3;
      
    }
      
    .column-lg-4 {
      
      grid-column-start: span 4;
      
      grid-column-end: span 4;
      
    }
      
    .column-lg-5 {
      
      grid-column-start: span 5;
      
      grid-column-end: span 5;
      
    }
      
    .column-lg-6 {
      
      grid-column-start: span 6;
      
      grid-column-end: span 6;
      
    }
      
    .column-lg-7 {
      
      grid-column-start: span 7;
      
      grid-column-end: span 7;
      
    }
      
    .column-lg-8 {
      
      grid-column-start: span 8;
      
      grid-column-end: span 8;
      
    }
      
    .column-lg-9 {
      
      grid-column-start: span 9;
      
      grid-column-end: span 9;
      
    }
      
    .column-lg-10 {
      
      grid-column-start: span 10;
      
      grid-column-end: span 10;
      
    }
      
    .column-lg-11 {
      
      grid-column-start: span 11;
      
      grid-column-end: span 11;
      
    }
      
    .column-lg-12 {
      
      grid-column-start: span 12;
      
      grid-column-end: span 12;
      
    }
      
  }
      
}
      

      
* {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
*::before,
      
*::after {
      
  -webkit-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      

      
body {
      
  font-family: 'Barlow', sans-serif;
      
  font-size: 1.125rem;
      
  line-height: 1.5;
      
  color: #787878;
      
  background: #fff;
      
  text-rendering: optimizeLegibility;
      
}
      

      
ul li {
      
  margin: 0 1.5rem 0 0;
      
}
      

      
a {
      
  color: #787878;
      
  text-decoration: none;
      
  -webkit-transition: all 0.2s ease;
      
  -o-transition: all 0.2s ease;
      
  transition: all 0.2s ease;
      
}
      

      
a:hover {
      
  color: #2e2e2e;
      
}
      

      
a.active {
      
  color: #2e2e2e;
      
}
      

      
nav {
      
  padding: 2.5rem 0 2.5rem 0;
      
}
      

      
nav ul {
      
  display: -webkit-box;
      
  display: -ms-flexbox;
      
  display: flex;
      
  -webkit-box-pack: left;
      
  -ms-flex-pack: left;
      
  justify-content: left;
      
}
      

      
nav li {
      
  font-size: 1.25rem;
      
}
      

      
nav li:nth-child(2) {
      
  margin: 0;
      
}
      

      
#highlight {
      
  color: #ea8478;
      
  font-size: 1.25rem;
      
}
      

      
.gallery {
      
  padding: 0 0 4rem 0;
      
}
      

      
.img-container {
      
  width: 100%;
      
  height: 500px;
      
  cursor: pointer;
      
  overflow: hidden;
      
}
      

      
.img-container:hover .img-content-hover {
      
  display: block;
      
}
      

      
.moto {
      
  width: 100%;
      
  height: 500px;
      
  -o-object-fit: cover;
      
  object-fit: cover;
      
  -webkit-transform: scale(1);
      
  -ms-transform: scale(1);
      
  transform: scale(1);
      
  -webkit-transition: all 0.3s ease-in-out;
      
  -o-transition: all 0.3s ease-in-out;
      
  transition: all 0.3s ease-in-out;
      
}
      

      
.moto:hover {
      
  -webkit-transform: scale(1.05);
      
  -ms-transform: scale(1.05);
      
  transform: scale(1.05);
      
}
      

      
.img-content-hover {
      
  position: absolute;
      
  z-index: 1;
      
  white-space: nowrap;
      
  display: none;
      
  padding: 1rem;
      
  background: #fff;
      
  font-weight: 400;
      
  margin-top: 1.25rem;
      
  margin-left: -2rem;
      
}
      

      
.title {
      
  color: #2e2e2e;
      
  font-size: 1.5rem;
      
  font-weight: 700;
      
}
      

      
.category {
      
  font-size: 1rem;
      
  color: #787878;
      
}
      

      
.img-content {
      
  display: none;
      
}
      

      
.social,
      
.copyright {
      
  margin: 1rem;
      
}
      

      
.social li {
      
  display: inline-block;
      
}
      

      
footer {
      
  padding: 1rem 0;
      
  background: #23272A;
      
  text-align: center;
      
}
      

      
@supports (display: grid) {
      
  .gallery .grid {
      
    grid-gap: 1rem;
      
  }
      
}
      

      
@media (min-width: 62rem) {
      
  nav ul {
      
    -webkit-box-pack: right;
      
    -ms-flex-pack: right;
      
    justify-content: right;
      
  }
      
}
      

      
@media screen and (max-width: 1024px) {
      
  img:hover {
      
    -webkit-transform: none;
      
    -ms-transform: none;
      
    transform: none;
      
  }
      
  .img-container {
      
    height: 100%;
      
  }
      
  .img-container:hover .img-content-hover {
      
    display: none;
      
  }
      
  .img-content {
      
    display: block;
      
    padding: 1rem 0;
      
  }
      
}

      <section class="gallery">
      
  <div class="container">
      
    <div class="grid">
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Smart Watch</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Smart Watch</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Camera Film</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Camera Film</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-4">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
      
          <figcaption class="img-content">
      
            <h2 class="title">Coffee</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Coffee</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Phone</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Phone</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      
      <div class="column-xs-12 column-md-6">
      
        <figure class="img-container">
      
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
      
          <figcaption class="img-content">
      
            <h2 class="title">Keyboard</h2>
      
            <h3 class="category">Showcase</h3>
      
          </figcaption>
      
          <span class="img-content-hover">
      
                            <h2 class="title">Keyboard</h2>
      
                            <h3 class="category">Showcase</h3>
      
                        </span>
      
        </figure>
      
      </div>
      

      
    </div>
      
  </div>
      
</section>





      html css html5 css3 css-grid




      html css html5 css3 css-grid






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 11 at 12:39









      Michael_B

      144k47229338




      144k47229338










      asked Nov 11 at 9:44









      Jenson Varghese

      173




      173
























          2 Answers
          2






          active

          oldest

          votes


















          1














          The problem is not related to the grip-gap property.



          In fact, both grid-column-gap and grid-row-gap render at equal lengths, as you've specified:



          .gallery .grid {
          
    grid-gap: 1rem;
          
}


          Yes, the gaps appear different.



          enter image description here



          But if you highlight the grid, you'll notice the gaps are the same:



          enter image description here



          (Outlined using Chrome dev tools.)



          The problem is caused by the content of grid items not filling the entire height of each item.



          And that's caused by default margins on the figure element:



          enter image description here



          (Read about the margin-block-* and margin-inline-* properties.)



          So the solution is to override those margins. Add this to your code:



          figure.img-container {
          
  margin: 0;
          
}


          jsFiddle demo






          figure.img-container {
          
  margin: 0;
          
}
          

          
.container {
          
  margin: auto;
          
  padding: 0 1rem;
          
  max-width: 90rem;
          
  width: 100%;
          
}
          

          
.grid {
          
  display: -webkit-box;
          
  display: -ms-flexbox;
          
  display: flex;
          
  -webkit-box-orient: vertical;
          
  -webkit-box-direction: normal;
          
  -ms-flex-direction: column;
          
  flex-direction: column;
          
  -ms-flex-flow: row wrap;
          
  flex-flow: row wrap;
          
}
          

          
.grid>[class*="column-"] {
          
  display: block;
          
}
          

          
.first {
          
  -webkit-box-ordinal-group: 0;
          
  -ms-flex-order: -1;
          
  order: -1;
          
}
          

          
.last {
          
  -webkit-box-ordinal-group: 13;
          
  -ms-flex-order: 12;
          
  order: 12;
          
}
          

          
.align-top {
          
  -webkit-box-align: start;
          
  -ms-flex-align: start;
          
  align-items: start;
          
}
          

          
.align-center {
          
  -webkit-box-align: center;
          
  -ms-flex-align: center;
          
  align-items: center;
          
}
          

          
.align-bottom {
          
  -webkit-box-align: end;
          
  -ms-flex-align: end;
          
  align-items: end;
          
}
          

          
.column-xs-1 {
          
  -ms-flex-preferred-size: 8.3333333333%;
          
  flex-basis: 8.3333333333%;
          
  max-width: 8.3333333333%;
          
}
          

          
.column-xs-2 {
          
  -ms-flex-preferred-size: 16.6666666667%;
          
  flex-basis: 16.6666666667%;
          
  max-width: 16.6666666667%;
          
}
          

          
.column-xs-3 {
          
  -ms-flex-preferred-size: 25%;
          
  flex-basis: 25%;
          
  max-width: 25%;
          
}
          

          
.column-xs-4 {
          
  -ms-flex-preferred-size: 33.3333333333%;
          
  flex-basis: 33.3333333333%;
          
  max-width: 33.3333333333%;
          
}
          

          
.column-xs-5 {
          
  -ms-flex-preferred-size: 41.6666666667%;
          
  flex-basis: 41.6666666667%;
          
  max-width: 41.6666666667%;
          
}
          

          
.column-xs-6 {
          
  -ms-flex-preferred-size: 50%;
          
  flex-basis: 50%;
          
  max-width: 50%;
          
}
          

          
.column-xs-7 {
          
  -ms-flex-preferred-size: 58.3333333333%;
          
  flex-basis: 58.3333333333%;
          
  max-width: 58.3333333333%;
          
}
          

          
.column-xs-8 {
          
  -ms-flex-preferred-size: 66.6666666667%;
          
  flex-basis: 66.6666666667%;
          
  max-width: 66.6666666667%;
          
}
          

          
.column-xs-9 {
          
  -ms-flex-preferred-size: 75%;
          
  flex-basis: 75%;
          
  max-width: 75%;
          
}
          

          
.column-xs-10 {
          
  -ms-flex-preferred-size: 83.3333333333%;
          
  flex-basis: 83.3333333333%;
          
  max-width: 83.3333333333%;
          
}
          

          
.column-xs-11 {
          
  -ms-flex-preferred-size: 91.6666666667%;
          
  flex-basis: 91.6666666667%;
          
  max-width: 91.6666666667%;
          
}
          

          
.column-xs-12 {
          
  -ms-flex-preferred-size: 100%;
          
  flex-basis: 100%;
          
  max-width: 100%;
          
}
          

          
@media (min-width: 48rem) {
          
  .column-sm-1 {
          
    -ms-flex-preferred-size: 8.3333333333%;
          
    flex-basis: 8.3333333333%;
          
    max-width: 8.3333333333%;
          
  }
          
  .column-sm-2 {
          
    -ms-flex-preferred-size: 16.6666666667%;
          
    flex-basis: 16.6666666667%;
          
    max-width: 16.6666666667%;
          
  }
          
  .column-sm-3 {
          
    -ms-flex-preferred-size: 25%;
          
    flex-basis: 25%;
          
    max-width: 25%;
          
  }
          
  .column-sm-4 {
          
    -ms-flex-preferred-size: 33.3333333333%;
          
    flex-basis: 33.3333333333%;
          
    max-width: 33.3333333333%;
          
  }
          
  .column-sm-5 {
          
    -ms-flex-preferred-size: 41.6666666667%;
          
    flex-basis: 41.6666666667%;
          
    max-width: 41.6666666667%;
          
  }
          
  .column-sm-6 {
          
    -ms-flex-preferred-size: 50%;
          
    flex-basis: 50%;
          
    max-width: 50%;
          
  }
          
  .column-sm-7 {
          
    -ms-flex-preferred-size: 58.3333333333%;
          
    flex-basis: 58.3333333333%;
          
    max-width: 58.3333333333%;
          
  }
          
  .column-sm-8 {
          
    -ms-flex-preferred-size: 66.6666666667%;
          
    flex-basis: 66.6666666667%;
          
    max-width: 66.6666666667%;
          
  }
          
  .column-sm-9 {
          
    -ms-flex-preferred-size: 75%;
          
    flex-basis: 75%;
          
    max-width: 75%;
          
  }
          
  .column-sm-10 {
          
    -ms-flex-preferred-size: 83.3333333333%;
          
    flex-basis: 83.3333333333%;
          
    max-width: 83.3333333333%;
          
  }
          
  .column-sm-11 {
          
    -ms-flex-preferred-size: 91.6666666667%;
          
    flex-basis: 91.6666666667%;
          
    max-width: 91.6666666667%;
          
  }
          
  .column-sm-12 {
          
    -ms-flex-preferred-size: 100%;
          
    flex-basis: 100%;
          
    max-width: 100%;
          
  }
          
}
          

          
@media (min-width: 62rem) {
          
  .column-md-1 {
          
    -ms-flex-preferred-size: 8.3333333333%;
          
    flex-basis: 8.3333333333%;
          
    max-width: 8.3333333333%;
          
  }
          
  .column-md-2 {
          
    -ms-flex-preferred-size: 16.6666666667%;
          
    flex-basis: 16.6666666667%;
          
    max-width: 16.6666666667%;
          
  }
          
  .column-md-3 {
          
    -ms-flex-preferred-size: 25%;
          
    flex-basis: 25%;
          
    max-width: 25%;
          
  }
          
  .column-md-4 {
          
    -ms-flex-preferred-size: 33.3333333333%;
          
    flex-basis: 33.3333333333%;
          
    max-width: 33.3333333333%;
          
  }
          
  .column-md-5 {
          
    -ms-flex-preferred-size: 41.6666666667%;
          
    flex-basis: 41.6666666667%;
          
    max-width: 41.6666666667%;
          
  }
          
  .column-md-6 {
          
    -ms-flex-preferred-size: 50%;
          
    flex-basis: 50%;
          
    max-width: 50%;
          
  }
          
  .column-md-7 {
          
    -ms-flex-preferred-size: 58.3333333333%;
          
    flex-basis: 58.3333333333%;
          
    max-width: 58.3333333333%;
          
  }
          
  .column-md-8 {
          
    -ms-flex-preferred-size: 66.6666666667%;
          
    flex-basis: 66.6666666667%;
          
    max-width: 66.6666666667%;
          
  }
          
  .column-md-9 {
          
    -ms-flex-preferred-size: 75%;
          
    flex-basis: 75%;
          
    max-width: 75%;
          
  }
          
  .column-md-10 {
          
    -ms-flex-preferred-size: 83.3333333333%;
          
    flex-basis: 83.3333333333%;
          
    max-width: 83.3333333333%;
          
  }
          
  .column-md-11 {
          
    -ms-flex-preferred-size: 91.6666666667%;
          
    flex-basis: 91.6666666667%;
          
    max-width: 91.6666666667%;
          
  }
          
  .column-md-12 {
          
    -ms-flex-preferred-size: 100%;
          
    flex-basis: 100%;
          
    max-width: 100%;
          
  }
          
}
          

          
@media (min-width: 75rem) {
          
  .column-lg-1 {
          
    -ms-flex-preferred-size: 8.3333333333%;
          
    flex-basis: 8.3333333333%;
          
    max-width: 8.3333333333%;
          
  }
          
  .column-lg-2 {
          
    -ms-flex-preferred-size: 16.6666666667%;
          
    flex-basis: 16.6666666667%;
          
    max-width: 16.6666666667%;
          
  }
          
  .column-lg-3 {
          
    -ms-flex-preferred-size: 25%;
          
    flex-basis: 25%;
          
    max-width: 25%;
          
  }
          
  .column-lg-4 {
          
    -ms-flex-preferred-size: 33.3333333333%;
          
    flex-basis: 33.3333333333%;
          
    max-width: 33.3333333333%;
          
  }
          
  .column-lg-5 {
          
    -ms-flex-preferred-size: 41.6666666667%;
          
    flex-basis: 41.6666666667%;
          
    max-width: 41.6666666667%;
          
  }
          
  .column-lg-6 {
          
    -ms-flex-preferred-size: 50%;
          
    flex-basis: 50%;
          
    max-width: 50%;
          
  }
          
  .column-lg-7 {
          
    -ms-flex-preferred-size: 58.3333333333%;
          
    flex-basis: 58.3333333333%;
          
    max-width: 58.3333333333%;
          
  }
          
  .column-lg-8 {
          
    -ms-flex-preferred-size: 66.6666666667%;
          
    flex-basis: 66.6666666667%;
          
    max-width: 66.6666666667%;
          
  }
          
  .column-lg-9 {
          
    -ms-flex-preferred-size: 75%;
          
    flex-basis: 75%;
          
    max-width: 75%;
          
  }
          
  .column-lg-10 {
          
    -ms-flex-preferred-size: 83.3333333333%;
          
    flex-basis: 83.3333333333%;
          
    max-width: 83.3333333333%;
          
  }
          
  .column-lg-11 {
          
    -ms-flex-preferred-size: 91.6666666667%;
          
    flex-basis: 91.6666666667%;
          
    max-width: 91.6666666667%;
          
  }
          
  .column-lg-12 {
          
    -ms-flex-preferred-size: 100%;
          
    flex-basis: 100%;
          
    max-width: 100%;
          
  }
          
}
          

          
@supports (display: grid) {
          
  .grid {
          
    display: grid;
          
    grid-template-columns: repeat(12, 1fr);
          
    grid-template-rows: auto;
          
  }
          
  .grid>[class*="column-"] {
          
    margin: 0;
          
    max-width: 100%;
          
  }
          
  .column-xs-1 {
          
    grid-column-start: span 1;
          
    grid-column-end: span 1;
          
  }
          
  .column-xs-2 {
          
    grid-column-start: span 2;
          
    grid-column-end: span 2;
          
  }
          
  .column-xs-3 {
          
    grid-column-start: span 3;
          
    grid-column-end: span 3;
          
  }
          
  .column-xs-4 {
          
    grid-column-start: span 4;
          
    grid-column-end: span 4;
          
  }
          
  .column-xs-5 {
          
    grid-column-start: span 5;
          
    grid-column-end: span 5;
          
  }
          
  .column-xs-6 {
          
    grid-column-start: span 6;
          
    grid-column-end: span 6;
          
  }
          
  .column-xs-7 {
          
    grid-column-start: span 7;
          
    grid-column-end: span 7;
          
  }
          
  .column-xs-8 {
          
    grid-column-start: span 8;
          
    grid-column-end: span 8;
          
  }
          
  .column-xs-9 {
          
    grid-column-start: span 9;
          
    grid-column-end: span 9;
          
  }
          
  .column-xs-10 {
          
    grid-column-start: span 10;
          
    grid-column-end: span 10;
          
  }
          
  .column-xs-11 {
          
    grid-column-start: span 11;
          
    grid-column-end: span 11;
          
  }
          
  .column-xs-12 {
          
    grid-column-start: span 12;
          
    grid-column-end: span 12;
          
  }
          
  @media (min-width: 48rem) {
          
    .column-sm-1 {
          
      grid-column-start: span 1;
          
      grid-column-end: span 1;
          
    }
          
    .column-sm-2 {
          
      grid-column-start: span 2;
          
      grid-column-end: span 2;
          
    }
          
    .column-sm-3 {
          
      grid-column-start: span 3;
          
      grid-column-end: span 3;
          
    }
          
    .column-sm-4 {
          
      grid-column-start: span 4;
          
      grid-column-end: span 4;
          
    }
          
    .column-sm-5 {
          
      grid-column-start: span 5;
          
      grid-column-end: span 5;
          
    }
          
    .column-sm-6 {
          
      grid-column-start: span 6;
          
      grid-column-end: span 6;
          
    }
          
    .column-sm-7 {
          
      grid-column-start: span 7;
          
      grid-column-end: span 7;
          
    }
          
    .column-sm-8 {
          
      grid-column-start: span 8;
          
      grid-column-end: span 8;
          
    }
          
    .column-sm-9 {
          
      grid-column-start: span 9;
          
      grid-column-end: span 9;
          
    }
          
    .column-sm-10 {
          
      grid-column-start: span 10;
          
      grid-column-end: span 10;
          
    }
          
    .column-sm-11 {
          
      grid-column-start: span 11;
          
      grid-column-end: span 11;
          
    }
          
    .column-sm-12 {
          
      grid-column-start: span 12;
          
      grid-column-end: span 12;
          
    }
          
  }
          
  @media (min-width: 62rem) {
          
    .column-md-1 {
          
      grid-column-start: span 1;
          
      grid-column-end: span 1;
          
    }
          
    .column-md-2 {
          
      grid-column-start: span 2;
          
      grid-column-end: span 2;
          
    }
          
    .column-md-3 {
          
      grid-column-start: span 3;
          
      grid-column-end: span 3;
          
    }
          
    .column-md-4 {
          
      grid-column-start: span 4;
          
      grid-column-end: span 4;
          
    }
          
    .column-md-5 {
          
      grid-column-start: span 5;
          
      grid-column-end: span 5;
          
    }
          
    .column-md-6 {
          
      grid-column-start: span 6;
          
      grid-column-end: span 6;
          
    }
          
    .column-md-7 {
          
      grid-column-start: span 7;
          
      grid-column-end: span 7;
          
    }
          
    .column-md-8 {
          
      grid-column-start: span 8;
          
      grid-column-end: span 8;
          
    }
          
    .column-md-9 {
          
      grid-column-start: span 9;
          
      grid-column-end: span 9;
          
    }
          
    .column-md-10 {
          
      grid-column-start: span 10;
          
      grid-column-end: span 10;
          
    }
          
    .column-md-11 {
          
      grid-column-start: span 11;
          
      grid-column-end: span 11;
          
    }
          
    .column-md-12 {
          
      grid-column-start: span 12;
          
      grid-column-end: span 12;
          
    }
          
  }
          
  @media (min-width: 75rem) {
          
    .column-lg-1 {
          
      grid-column-start: span 1;
          
      grid-column-end: span 1;
          
    }
          
    .column-lg-2 {
          
      grid-column-start: span 2;
          
      grid-column-end: span 2;
          
    }
          
    .column-lg-3 {
          
      grid-column-start: span 3;
          
      grid-column-end: span 3;
          
    }
          
    .column-lg-4 {
          
      grid-column-start: span 4;
          
      grid-column-end: span 4;
          
    }
          
    .column-lg-5 {
          
      grid-column-start: span 5;
          
      grid-column-end: span 5;
          
    }
          
    .column-lg-6 {
          
      grid-column-start: span 6;
          
      grid-column-end: span 6;
          
    }
          
    .column-lg-7 {
          
      grid-column-start: span 7;
          
      grid-column-end: span 7;
          
    }
          
    .column-lg-8 {
          
      grid-column-start: span 8;
          
      grid-column-end: span 8;
          
    }
          
    .column-lg-9 {
          
      grid-column-start: span 9;
          
      grid-column-end: span 9;
          
    }
          
    .column-lg-10 {
          
      grid-column-start: span 10;
          
      grid-column-end: span 10;
          
    }
          
    .column-lg-11 {
          
      grid-column-start: span 11;
          
      grid-column-end: span 11;
          
    }
          
    .column-lg-12 {
          
      grid-column-start: span 12;
          
      grid-column-end: span 12;
          
    }
          
  }
          
}
          

          
* {
          
  -webkit-box-sizing: border-box;
          
  box-sizing: border-box;
          
}
          

          
*::before,
          
*::after {
          
  -webkit-box-sizing: border-box;
          
  box-sizing: border-box;
          
}
          

          
body {
          
  font-family: 'Barlow', sans-serif;
          
  font-size: 1.125rem;
          
  line-height: 1.5;
          
  color: #787878;
          
  background: #fff;
          
  text-rendering: optimizeLegibility;
          
}
          

          
ul li {
          
  margin: 0 1.5rem 0 0;
          
}
          

          
a {
          
  color: #787878;
          
  text-decoration: none;
          
  -webkit-transition: all 0.2s ease;
          
  -o-transition: all 0.2s ease;
          
  transition: all 0.2s ease;
          
}
          

          
a:hover {
          
  color: #2e2e2e;
          
}
          

          
a.active {
          
  color: #2e2e2e;
          
}
          

          
nav {
          
  padding: 2.5rem 0 2.5rem 0;
          
}
          

          
nav ul {
          
  display: -webkit-box;
          
  display: -ms-flexbox;
          
  display: flex;
          
  -webkit-box-pack: left;
          
  -ms-flex-pack: left;
          
  justify-content: left;
          
}
          

          
nav li {
          
  font-size: 1.25rem;
          
}
          

          
nav li:nth-child(2) {
          
  margin: 0;
          
}
          

          
#highlight {
          
  color: #ea8478;
          
  font-size: 1.25rem;
          
}
          

          
.gallery {
          
  padding: 0 0 4rem 0;
          
}
          

          
.img-container {
          
  width: 100%;
          
  height: 500px;
          
  cursor: pointer;
          
  overflow: hidden;
          
}
          

          
.img-container:hover .img-content-hover {
          
  display: block;
          
}
          

          
.moto {
          
  width: 100%;
          
  height: 500px;
          
  -o-object-fit: cover;
          
  object-fit: cover;
          
  -webkit-transform: scale(1);
          
  -ms-transform: scale(1);
          
  transform: scale(1);
          
  -webkit-transition: all 0.3s ease-in-out;
          
  -o-transition: all 0.3s ease-in-out;
          
  transition: all 0.3s ease-in-out;
          
}
          

          
.moto:hover {
          
  -webkit-transform: scale(1.05);
          
  -ms-transform: scale(1.05);
          
  transform: scale(1.05);
          
}
          

          
.img-content-hover {
          
  position: absolute;
          
  z-index: 1;
          
  white-space: nowrap;
          
  display: none;
          
  padding: 1rem;
          
  background: #fff;
          
  font-weight: 400;
          
  margin-top: 1.25rem;
          
  margin-left: -2rem;
          
}
          

          
.title {
          
  color: #2e2e2e;
          
  font-size: 1.5rem;
          
  font-weight: 700;
          
}
          

          
.category {
          
  font-size: 1rem;
          
  color: #787878;
          
}
          

          
.img-content {
          
  display: none;
          
}
          

          
.social,
          
.copyright {
          
  margin: 1rem;
          
}
          

          
.social li {
          
  display: inline-block;
          
}
          

          
footer {
          
  padding: 1rem 0;
          
  background: #23272A;
          
  text-align: center;
          
}
          

          
@supports (display: grid) {
          
  .gallery .grid {
          
    grid-gap: 1rem;
          
  }
          
}
          

          
@media (min-width: 62rem) {
          
  nav ul {
          
    -webkit-box-pack: right;
          
    -ms-flex-pack: right;
          
    justify-content: right;
          
  }
          
}
          

          
@media screen and (max-width: 1024px) {
          
  img:hover {
          
    -webkit-transform: none;
          
    -ms-transform: none;
          
    transform: none;
          
  }
          
  .img-container {
          
    height: 100%;
          
  }
          
  .img-container:hover .img-content-hover {
          
    display: none;
          
  }
          
  .img-content {
          
    display: block;
          
    padding: 1rem 0;
          
  }
          
}

          <section class="gallery">
          
  <div class="container">
          
    <div class="grid">
          
      <div class="column-xs-12 column-md-4">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Smart Watch</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Smart Watch</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-4">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Camera Film</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Camera Film</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-4">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
          
          <figcaption class="img-content">
          
            <h2 class="title">Coffee</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Coffee</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-6">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Phone</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Phone</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-6">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Keyboard</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Keyboard</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-4">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Smart Watch</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Smart Watch</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-4">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Camera Film</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Camera Film</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-4">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
          
          <figcaption class="img-content">
          
            <h2 class="title">Coffee</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Coffee</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-6">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Phone</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Phone</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          
      <div class="column-xs-12 column-md-6">
          
        <figure class="img-container">
          
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
          
          <figcaption class="img-content">
          
            <h2 class="title">Keyboard</h2>
          
            <h3 class="category">Showcase</h3>
          
          </figcaption>
          
          <span class="img-content-hover">
          
                            <h2 class="title">Keyboard</h2>
          
                            <h3 class="category">Showcase</h3>
          
                        </span>
          
        </figure>
          
      </div>
          

          
    </div>
          
  </div>
          
</section>








          share|improve this answer



















          • 1




            I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
            – Jenson Varghese
            Nov 12 at 0:21



















          0














          There seems to be some default margin added which threw the whole grid off whack, it has been found and resolved. Many thanks!






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247483%2fgrid-gap-inconsistent-between-rows-and-columns%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            The problem is not related to the grip-gap property.



            In fact, both grid-column-gap and grid-row-gap render at equal lengths, as you've specified:



            .gallery .grid {
            
    grid-gap: 1rem;
            
}


            Yes, the gaps appear different.



            enter image description here



            But if you highlight the grid, you'll notice the gaps are the same:



            enter image description here



            (Outlined using Chrome dev tools.)



            The problem is caused by the content of grid items not filling the entire height of each item.



            And that's caused by default margins on the figure element:



            enter image description here



            (Read about the margin-block-* and margin-inline-* properties.)



            So the solution is to override those margins. Add this to your code:



            figure.img-container {
            
  margin: 0;
            
}


            jsFiddle demo






            figure.img-container {
            
  margin: 0;
            
}
            

            
.container {
            
  margin: auto;
            
  padding: 0 1rem;
            
  max-width: 90rem;
            
  width: 100%;
            
}
            

            
.grid {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-orient: vertical;
            
  -webkit-box-direction: normal;
            
  -ms-flex-direction: column;
            
  flex-direction: column;
            
  -ms-flex-flow: row wrap;
            
  flex-flow: row wrap;
            
}
            

            
.grid>[class*="column-"] {
            
  display: block;
            
}
            

            
.first {
            
  -webkit-box-ordinal-group: 0;
            
  -ms-flex-order: -1;
            
  order: -1;
            
}
            

            
.last {
            
  -webkit-box-ordinal-group: 13;
            
  -ms-flex-order: 12;
            
  order: 12;
            
}
            

            
.align-top {
            
  -webkit-box-align: start;
            
  -ms-flex-align: start;
            
  align-items: start;
            
}
            

            
.align-center {
            
  -webkit-box-align: center;
            
  -ms-flex-align: center;
            
  align-items: center;
            
}
            

            
.align-bottom {
            
  -webkit-box-align: end;
            
  -ms-flex-align: end;
            
  align-items: end;
            
}
            

            
.column-xs-1 {
            
  -ms-flex-preferred-size: 8.3333333333%;
            
  flex-basis: 8.3333333333%;
            
  max-width: 8.3333333333%;
            
}
            

            
.column-xs-2 {
            
  -ms-flex-preferred-size: 16.6666666667%;
            
  flex-basis: 16.6666666667%;
            
  max-width: 16.6666666667%;
            
}
            

            
.column-xs-3 {
            
  -ms-flex-preferred-size: 25%;
            
  flex-basis: 25%;
            
  max-width: 25%;
            
}
            

            
.column-xs-4 {
            
  -ms-flex-preferred-size: 33.3333333333%;
            
  flex-basis: 33.3333333333%;
            
  max-width: 33.3333333333%;
            
}
            

            
.column-xs-5 {
            
  -ms-flex-preferred-size: 41.6666666667%;
            
  flex-basis: 41.6666666667%;
            
  max-width: 41.6666666667%;
            
}
            

            
.column-xs-6 {
            
  -ms-flex-preferred-size: 50%;
            
  flex-basis: 50%;
            
  max-width: 50%;
            
}
            

            
.column-xs-7 {
            
  -ms-flex-preferred-size: 58.3333333333%;
            
  flex-basis: 58.3333333333%;
            
  max-width: 58.3333333333%;
            
}
            

            
.column-xs-8 {
            
  -ms-flex-preferred-size: 66.6666666667%;
            
  flex-basis: 66.6666666667%;
            
  max-width: 66.6666666667%;
            
}
            

            
.column-xs-9 {
            
  -ms-flex-preferred-size: 75%;
            
  flex-basis: 75%;
            
  max-width: 75%;
            
}
            

            
.column-xs-10 {
            
  -ms-flex-preferred-size: 83.3333333333%;
            
  flex-basis: 83.3333333333%;
            
  max-width: 83.3333333333%;
            
}
            

            
.column-xs-11 {
            
  -ms-flex-preferred-size: 91.6666666667%;
            
  flex-basis: 91.6666666667%;
            
  max-width: 91.6666666667%;
            
}
            

            
.column-xs-12 {
            
  -ms-flex-preferred-size: 100%;
            
  flex-basis: 100%;
            
  max-width: 100%;
            
}
            

            
@media (min-width: 48rem) {
            
  .column-sm-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-sm-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-sm-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-sm-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-sm-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-sm-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-sm-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-sm-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-sm-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-sm-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-sm-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-sm-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  .column-md-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-md-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-md-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-md-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-md-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-md-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-md-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-md-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-md-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-md-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-md-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-md-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 75rem) {
            
  .column-lg-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-lg-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-lg-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-lg-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-lg-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-lg-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-lg-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-lg-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-lg-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-lg-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-lg-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-lg-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@supports (display: grid) {
            
  .grid {
            
    display: grid;
            
    grid-template-columns: repeat(12, 1fr);
            
    grid-template-rows: auto;
            
  }
            
  .grid>[class*="column-"] {
            
    margin: 0;
            
    max-width: 100%;
            
  }
            
  .column-xs-1 {
            
    grid-column-start: span 1;
            
    grid-column-end: span 1;
            
  }
            
  .column-xs-2 {
            
    grid-column-start: span 2;
            
    grid-column-end: span 2;
            
  }
            
  .column-xs-3 {
            
    grid-column-start: span 3;
            
    grid-column-end: span 3;
            
  }
            
  .column-xs-4 {
            
    grid-column-start: span 4;
            
    grid-column-end: span 4;
            
  }
            
  .column-xs-5 {
            
    grid-column-start: span 5;
            
    grid-column-end: span 5;
            
  }
            
  .column-xs-6 {
            
    grid-column-start: span 6;
            
    grid-column-end: span 6;
            
  }
            
  .column-xs-7 {
            
    grid-column-start: span 7;
            
    grid-column-end: span 7;
            
  }
            
  .column-xs-8 {
            
    grid-column-start: span 8;
            
    grid-column-end: span 8;
            
  }
            
  .column-xs-9 {
            
    grid-column-start: span 9;
            
    grid-column-end: span 9;
            
  }
            
  .column-xs-10 {
            
    grid-column-start: span 10;
            
    grid-column-end: span 10;
            
  }
            
  .column-xs-11 {
            
    grid-column-start: span 11;
            
    grid-column-end: span 11;
            
  }
            
  .column-xs-12 {
            
    grid-column-start: span 12;
            
    grid-column-end: span 12;
            
  }
            
  @media (min-width: 48rem) {
            
    .column-sm-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-sm-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-sm-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-sm-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-sm-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-sm-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-sm-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-sm-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-sm-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-sm-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-sm-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-sm-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 62rem) {
            
    .column-md-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-md-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-md-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-md-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-md-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-md-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-md-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-md-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-md-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-md-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-md-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-md-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 75rem) {
            
    .column-lg-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-lg-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-lg-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-lg-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-lg-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-lg-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-lg-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-lg-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-lg-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-lg-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-lg-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-lg-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
}
            

            
* {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
*::before,
            
*::after {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
body {
            
  font-family: 'Barlow', sans-serif;
            
  font-size: 1.125rem;
            
  line-height: 1.5;
            
  color: #787878;
            
  background: #fff;
            
  text-rendering: optimizeLegibility;
            
}
            

            
ul li {
            
  margin: 0 1.5rem 0 0;
            
}
            

            
a {
            
  color: #787878;
            
  text-decoration: none;
            
  -webkit-transition: all 0.2s ease;
            
  -o-transition: all 0.2s ease;
            
  transition: all 0.2s ease;
            
}
            

            
a:hover {
            
  color: #2e2e2e;
            
}
            

            
a.active {
            
  color: #2e2e2e;
            
}
            

            
nav {
            
  padding: 2.5rem 0 2.5rem 0;
            
}
            

            
nav ul {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-pack: left;
            
  -ms-flex-pack: left;
            
  justify-content: left;
            
}
            

            
nav li {
            
  font-size: 1.25rem;
            
}
            

            
nav li:nth-child(2) {
            
  margin: 0;
            
}
            

            
#highlight {
            
  color: #ea8478;
            
  font-size: 1.25rem;
            
}
            

            
.gallery {
            
  padding: 0 0 4rem 0;
            
}
            

            
.img-container {
            
  width: 100%;
            
  height: 500px;
            
  cursor: pointer;
            
  overflow: hidden;
            
}
            

            
.img-container:hover .img-content-hover {
            
  display: block;
            
}
            

            
.moto {
            
  width: 100%;
            
  height: 500px;
            
  -o-object-fit: cover;
            
  object-fit: cover;
            
  -webkit-transform: scale(1);
            
  -ms-transform: scale(1);
            
  transform: scale(1);
            
  -webkit-transition: all 0.3s ease-in-out;
            
  -o-transition: all 0.3s ease-in-out;
            
  transition: all 0.3s ease-in-out;
            
}
            

            
.moto:hover {
            
  -webkit-transform: scale(1.05);
            
  -ms-transform: scale(1.05);
            
  transform: scale(1.05);
            
}
            

            
.img-content-hover {
            
  position: absolute;
            
  z-index: 1;
            
  white-space: nowrap;
            
  display: none;
            
  padding: 1rem;
            
  background: #fff;
            
  font-weight: 400;
            
  margin-top: 1.25rem;
            
  margin-left: -2rem;
            
}
            

            
.title {
            
  color: #2e2e2e;
            
  font-size: 1.5rem;
            
  font-weight: 700;
            
}
            

            
.category {
            
  font-size: 1rem;
            
  color: #787878;
            
}
            

            
.img-content {
            
  display: none;
            
}
            

            
.social,
            
.copyright {
            
  margin: 1rem;
            
}
            

            
.social li {
            
  display: inline-block;
            
}
            

            
footer {
            
  padding: 1rem 0;
            
  background: #23272A;
            
  text-align: center;
            
}
            

            
@supports (display: grid) {
            
  .gallery .grid {
            
    grid-gap: 1rem;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  nav ul {
            
    -webkit-box-pack: right;
            
    -ms-flex-pack: right;
            
    justify-content: right;
            
  }
            
}
            

            
@media screen and (max-width: 1024px) {
            
  img:hover {
            
    -webkit-transform: none;
            
    -ms-transform: none;
            
    transform: none;
            
  }
            
  .img-container {
            
    height: 100%;
            
  }
            
  .img-container:hover .img-content-hover {
            
    display: none;
            
  }
            
  .img-content {
            
    display: block;
            
    padding: 1rem 0;
            
  }
            
}

            <section class="gallery">
            
  <div class="container">
            
    <div class="grid">
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            

            
    </div>
            
  </div>
            
</section>








            share|improve this answer



















            • 1




              I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
              – Jenson Varghese
              Nov 12 at 0:21
















            1














            The problem is not related to the grip-gap property.



            In fact, both grid-column-gap and grid-row-gap render at equal lengths, as you've specified:



            .gallery .grid {
            
    grid-gap: 1rem;
            
}


            Yes, the gaps appear different.



            enter image description here



            But if you highlight the grid, you'll notice the gaps are the same:



            enter image description here



            (Outlined using Chrome dev tools.)



            The problem is caused by the content of grid items not filling the entire height of each item.



            And that's caused by default margins on the figure element:



            enter image description here



            (Read about the margin-block-* and margin-inline-* properties.)



            So the solution is to override those margins. Add this to your code:



            figure.img-container {
            
  margin: 0;
            
}


            jsFiddle demo






            figure.img-container {
            
  margin: 0;
            
}
            

            
.container {
            
  margin: auto;
            
  padding: 0 1rem;
            
  max-width: 90rem;
            
  width: 100%;
            
}
            

            
.grid {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-orient: vertical;
            
  -webkit-box-direction: normal;
            
  -ms-flex-direction: column;
            
  flex-direction: column;
            
  -ms-flex-flow: row wrap;
            
  flex-flow: row wrap;
            
}
            

            
.grid>[class*="column-"] {
            
  display: block;
            
}
            

            
.first {
            
  -webkit-box-ordinal-group: 0;
            
  -ms-flex-order: -1;
            
  order: -1;
            
}
            

            
.last {
            
  -webkit-box-ordinal-group: 13;
            
  -ms-flex-order: 12;
            
  order: 12;
            
}
            

            
.align-top {
            
  -webkit-box-align: start;
            
  -ms-flex-align: start;
            
  align-items: start;
            
}
            

            
.align-center {
            
  -webkit-box-align: center;
            
  -ms-flex-align: center;
            
  align-items: center;
            
}
            

            
.align-bottom {
            
  -webkit-box-align: end;
            
  -ms-flex-align: end;
            
  align-items: end;
            
}
            

            
.column-xs-1 {
            
  -ms-flex-preferred-size: 8.3333333333%;
            
  flex-basis: 8.3333333333%;
            
  max-width: 8.3333333333%;
            
}
            

            
.column-xs-2 {
            
  -ms-flex-preferred-size: 16.6666666667%;
            
  flex-basis: 16.6666666667%;
            
  max-width: 16.6666666667%;
            
}
            

            
.column-xs-3 {
            
  -ms-flex-preferred-size: 25%;
            
  flex-basis: 25%;
            
  max-width: 25%;
            
}
            

            
.column-xs-4 {
            
  -ms-flex-preferred-size: 33.3333333333%;
            
  flex-basis: 33.3333333333%;
            
  max-width: 33.3333333333%;
            
}
            

            
.column-xs-5 {
            
  -ms-flex-preferred-size: 41.6666666667%;
            
  flex-basis: 41.6666666667%;
            
  max-width: 41.6666666667%;
            
}
            

            
.column-xs-6 {
            
  -ms-flex-preferred-size: 50%;
            
  flex-basis: 50%;
            
  max-width: 50%;
            
}
            

            
.column-xs-7 {
            
  -ms-flex-preferred-size: 58.3333333333%;
            
  flex-basis: 58.3333333333%;
            
  max-width: 58.3333333333%;
            
}
            

            
.column-xs-8 {
            
  -ms-flex-preferred-size: 66.6666666667%;
            
  flex-basis: 66.6666666667%;
            
  max-width: 66.6666666667%;
            
}
            

            
.column-xs-9 {
            
  -ms-flex-preferred-size: 75%;
            
  flex-basis: 75%;
            
  max-width: 75%;
            
}
            

            
.column-xs-10 {
            
  -ms-flex-preferred-size: 83.3333333333%;
            
  flex-basis: 83.3333333333%;
            
  max-width: 83.3333333333%;
            
}
            

            
.column-xs-11 {
            
  -ms-flex-preferred-size: 91.6666666667%;
            
  flex-basis: 91.6666666667%;
            
  max-width: 91.6666666667%;
            
}
            

            
.column-xs-12 {
            
  -ms-flex-preferred-size: 100%;
            
  flex-basis: 100%;
            
  max-width: 100%;
            
}
            

            
@media (min-width: 48rem) {
            
  .column-sm-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-sm-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-sm-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-sm-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-sm-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-sm-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-sm-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-sm-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-sm-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-sm-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-sm-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-sm-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  .column-md-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-md-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-md-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-md-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-md-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-md-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-md-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-md-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-md-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-md-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-md-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-md-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 75rem) {
            
  .column-lg-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-lg-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-lg-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-lg-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-lg-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-lg-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-lg-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-lg-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-lg-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-lg-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-lg-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-lg-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@supports (display: grid) {
            
  .grid {
            
    display: grid;
            
    grid-template-columns: repeat(12, 1fr);
            
    grid-template-rows: auto;
            
  }
            
  .grid>[class*="column-"] {
            
    margin: 0;
            
    max-width: 100%;
            
  }
            
  .column-xs-1 {
            
    grid-column-start: span 1;
            
    grid-column-end: span 1;
            
  }
            
  .column-xs-2 {
            
    grid-column-start: span 2;
            
    grid-column-end: span 2;
            
  }
            
  .column-xs-3 {
            
    grid-column-start: span 3;
            
    grid-column-end: span 3;
            
  }
            
  .column-xs-4 {
            
    grid-column-start: span 4;
            
    grid-column-end: span 4;
            
  }
            
  .column-xs-5 {
            
    grid-column-start: span 5;
            
    grid-column-end: span 5;
            
  }
            
  .column-xs-6 {
            
    grid-column-start: span 6;
            
    grid-column-end: span 6;
            
  }
            
  .column-xs-7 {
            
    grid-column-start: span 7;
            
    grid-column-end: span 7;
            
  }
            
  .column-xs-8 {
            
    grid-column-start: span 8;
            
    grid-column-end: span 8;
            
  }
            
  .column-xs-9 {
            
    grid-column-start: span 9;
            
    grid-column-end: span 9;
            
  }
            
  .column-xs-10 {
            
    grid-column-start: span 10;
            
    grid-column-end: span 10;
            
  }
            
  .column-xs-11 {
            
    grid-column-start: span 11;
            
    grid-column-end: span 11;
            
  }
            
  .column-xs-12 {
            
    grid-column-start: span 12;
            
    grid-column-end: span 12;
            
  }
            
  @media (min-width: 48rem) {
            
    .column-sm-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-sm-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-sm-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-sm-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-sm-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-sm-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-sm-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-sm-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-sm-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-sm-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-sm-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-sm-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 62rem) {
            
    .column-md-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-md-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-md-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-md-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-md-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-md-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-md-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-md-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-md-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-md-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-md-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-md-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 75rem) {
            
    .column-lg-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-lg-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-lg-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-lg-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-lg-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-lg-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-lg-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-lg-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-lg-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-lg-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-lg-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-lg-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
}
            

            
* {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
*::before,
            
*::after {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
body {
            
  font-family: 'Barlow', sans-serif;
            
  font-size: 1.125rem;
            
  line-height: 1.5;
            
  color: #787878;
            
  background: #fff;
            
  text-rendering: optimizeLegibility;
            
}
            

            
ul li {
            
  margin: 0 1.5rem 0 0;
            
}
            

            
a {
            
  color: #787878;
            
  text-decoration: none;
            
  -webkit-transition: all 0.2s ease;
            
  -o-transition: all 0.2s ease;
            
  transition: all 0.2s ease;
            
}
            

            
a:hover {
            
  color: #2e2e2e;
            
}
            

            
a.active {
            
  color: #2e2e2e;
            
}
            

            
nav {
            
  padding: 2.5rem 0 2.5rem 0;
            
}
            

            
nav ul {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-pack: left;
            
  -ms-flex-pack: left;
            
  justify-content: left;
            
}
            

            
nav li {
            
  font-size: 1.25rem;
            
}
            

            
nav li:nth-child(2) {
            
  margin: 0;
            
}
            

            
#highlight {
            
  color: #ea8478;
            
  font-size: 1.25rem;
            
}
            

            
.gallery {
            
  padding: 0 0 4rem 0;
            
}
            

            
.img-container {
            
  width: 100%;
            
  height: 500px;
            
  cursor: pointer;
            
  overflow: hidden;
            
}
            

            
.img-container:hover .img-content-hover {
            
  display: block;
            
}
            

            
.moto {
            
  width: 100%;
            
  height: 500px;
            
  -o-object-fit: cover;
            
  object-fit: cover;
            
  -webkit-transform: scale(1);
            
  -ms-transform: scale(1);
            
  transform: scale(1);
            
  -webkit-transition: all 0.3s ease-in-out;
            
  -o-transition: all 0.3s ease-in-out;
            
  transition: all 0.3s ease-in-out;
            
}
            

            
.moto:hover {
            
  -webkit-transform: scale(1.05);
            
  -ms-transform: scale(1.05);
            
  transform: scale(1.05);
            
}
            

            
.img-content-hover {
            
  position: absolute;
            
  z-index: 1;
            
  white-space: nowrap;
            
  display: none;
            
  padding: 1rem;
            
  background: #fff;
            
  font-weight: 400;
            
  margin-top: 1.25rem;
            
  margin-left: -2rem;
            
}
            

            
.title {
            
  color: #2e2e2e;
            
  font-size: 1.5rem;
            
  font-weight: 700;
            
}
            

            
.category {
            
  font-size: 1rem;
            
  color: #787878;
            
}
            

            
.img-content {
            
  display: none;
            
}
            

            
.social,
            
.copyright {
            
  margin: 1rem;
            
}
            

            
.social li {
            
  display: inline-block;
            
}
            

            
footer {
            
  padding: 1rem 0;
            
  background: #23272A;
            
  text-align: center;
            
}
            

            
@supports (display: grid) {
            
  .gallery .grid {
            
    grid-gap: 1rem;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  nav ul {
            
    -webkit-box-pack: right;
            
    -ms-flex-pack: right;
            
    justify-content: right;
            
  }
            
}
            

            
@media screen and (max-width: 1024px) {
            
  img:hover {
            
    -webkit-transform: none;
            
    -ms-transform: none;
            
    transform: none;
            
  }
            
  .img-container {
            
    height: 100%;
            
  }
            
  .img-container:hover .img-content-hover {
            
    display: none;
            
  }
            
  .img-content {
            
    display: block;
            
    padding: 1rem 0;
            
  }
            
}

            <section class="gallery">
            
  <div class="container">
            
    <div class="grid">
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            

            
    </div>
            
  </div>
            
</section>








            share|improve this answer



















            • 1




              I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
              – Jenson Varghese
              Nov 12 at 0:21














            1












            1








            1






            The problem is not related to the grip-gap property.



            In fact, both grid-column-gap and grid-row-gap render at equal lengths, as you've specified:



            .gallery .grid {
            
    grid-gap: 1rem;
            
}


            Yes, the gaps appear different.



            enter image description here



            But if you highlight the grid, you'll notice the gaps are the same:



            enter image description here



            (Outlined using Chrome dev tools.)



            The problem is caused by the content of grid items not filling the entire height of each item.



            And that's caused by default margins on the figure element:



            enter image description here



            (Read about the margin-block-* and margin-inline-* properties.)



            So the solution is to override those margins. Add this to your code:



            figure.img-container {
            
  margin: 0;
            
}


            jsFiddle demo






            figure.img-container {
            
  margin: 0;
            
}
            

            
.container {
            
  margin: auto;
            
  padding: 0 1rem;
            
  max-width: 90rem;
            
  width: 100%;
            
}
            

            
.grid {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-orient: vertical;
            
  -webkit-box-direction: normal;
            
  -ms-flex-direction: column;
            
  flex-direction: column;
            
  -ms-flex-flow: row wrap;
            
  flex-flow: row wrap;
            
}
            

            
.grid>[class*="column-"] {
            
  display: block;
            
}
            

            
.first {
            
  -webkit-box-ordinal-group: 0;
            
  -ms-flex-order: -1;
            
  order: -1;
            
}
            

            
.last {
            
  -webkit-box-ordinal-group: 13;
            
  -ms-flex-order: 12;
            
  order: 12;
            
}
            

            
.align-top {
            
  -webkit-box-align: start;
            
  -ms-flex-align: start;
            
  align-items: start;
            
}
            

            
.align-center {
            
  -webkit-box-align: center;
            
  -ms-flex-align: center;
            
  align-items: center;
            
}
            

            
.align-bottom {
            
  -webkit-box-align: end;
            
  -ms-flex-align: end;
            
  align-items: end;
            
}
            

            
.column-xs-1 {
            
  -ms-flex-preferred-size: 8.3333333333%;
            
  flex-basis: 8.3333333333%;
            
  max-width: 8.3333333333%;
            
}
            

            
.column-xs-2 {
            
  -ms-flex-preferred-size: 16.6666666667%;
            
  flex-basis: 16.6666666667%;
            
  max-width: 16.6666666667%;
            
}
            

            
.column-xs-3 {
            
  -ms-flex-preferred-size: 25%;
            
  flex-basis: 25%;
            
  max-width: 25%;
            
}
            

            
.column-xs-4 {
            
  -ms-flex-preferred-size: 33.3333333333%;
            
  flex-basis: 33.3333333333%;
            
  max-width: 33.3333333333%;
            
}
            

            
.column-xs-5 {
            
  -ms-flex-preferred-size: 41.6666666667%;
            
  flex-basis: 41.6666666667%;
            
  max-width: 41.6666666667%;
            
}
            

            
.column-xs-6 {
            
  -ms-flex-preferred-size: 50%;
            
  flex-basis: 50%;
            
  max-width: 50%;
            
}
            

            
.column-xs-7 {
            
  -ms-flex-preferred-size: 58.3333333333%;
            
  flex-basis: 58.3333333333%;
            
  max-width: 58.3333333333%;
            
}
            

            
.column-xs-8 {
            
  -ms-flex-preferred-size: 66.6666666667%;
            
  flex-basis: 66.6666666667%;
            
  max-width: 66.6666666667%;
            
}
            

            
.column-xs-9 {
            
  -ms-flex-preferred-size: 75%;
            
  flex-basis: 75%;
            
  max-width: 75%;
            
}
            

            
.column-xs-10 {
            
  -ms-flex-preferred-size: 83.3333333333%;
            
  flex-basis: 83.3333333333%;
            
  max-width: 83.3333333333%;
            
}
            

            
.column-xs-11 {
            
  -ms-flex-preferred-size: 91.6666666667%;
            
  flex-basis: 91.6666666667%;
            
  max-width: 91.6666666667%;
            
}
            

            
.column-xs-12 {
            
  -ms-flex-preferred-size: 100%;
            
  flex-basis: 100%;
            
  max-width: 100%;
            
}
            

            
@media (min-width: 48rem) {
            
  .column-sm-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-sm-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-sm-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-sm-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-sm-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-sm-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-sm-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-sm-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-sm-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-sm-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-sm-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-sm-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  .column-md-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-md-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-md-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-md-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-md-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-md-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-md-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-md-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-md-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-md-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-md-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-md-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 75rem) {
            
  .column-lg-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-lg-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-lg-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-lg-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-lg-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-lg-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-lg-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-lg-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-lg-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-lg-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-lg-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-lg-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@supports (display: grid) {
            
  .grid {
            
    display: grid;
            
    grid-template-columns: repeat(12, 1fr);
            
    grid-template-rows: auto;
            
  }
            
  .grid>[class*="column-"] {
            
    margin: 0;
            
    max-width: 100%;
            
  }
            
  .column-xs-1 {
            
    grid-column-start: span 1;
            
    grid-column-end: span 1;
            
  }
            
  .column-xs-2 {
            
    grid-column-start: span 2;
            
    grid-column-end: span 2;
            
  }
            
  .column-xs-3 {
            
    grid-column-start: span 3;
            
    grid-column-end: span 3;
            
  }
            
  .column-xs-4 {
            
    grid-column-start: span 4;
            
    grid-column-end: span 4;
            
  }
            
  .column-xs-5 {
            
    grid-column-start: span 5;
            
    grid-column-end: span 5;
            
  }
            
  .column-xs-6 {
            
    grid-column-start: span 6;
            
    grid-column-end: span 6;
            
  }
            
  .column-xs-7 {
            
    grid-column-start: span 7;
            
    grid-column-end: span 7;
            
  }
            
  .column-xs-8 {
            
    grid-column-start: span 8;
            
    grid-column-end: span 8;
            
  }
            
  .column-xs-9 {
            
    grid-column-start: span 9;
            
    grid-column-end: span 9;
            
  }
            
  .column-xs-10 {
            
    grid-column-start: span 10;
            
    grid-column-end: span 10;
            
  }
            
  .column-xs-11 {
            
    grid-column-start: span 11;
            
    grid-column-end: span 11;
            
  }
            
  .column-xs-12 {
            
    grid-column-start: span 12;
            
    grid-column-end: span 12;
            
  }
            
  @media (min-width: 48rem) {
            
    .column-sm-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-sm-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-sm-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-sm-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-sm-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-sm-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-sm-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-sm-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-sm-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-sm-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-sm-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-sm-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 62rem) {
            
    .column-md-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-md-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-md-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-md-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-md-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-md-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-md-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-md-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-md-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-md-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-md-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-md-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 75rem) {
            
    .column-lg-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-lg-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-lg-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-lg-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-lg-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-lg-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-lg-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-lg-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-lg-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-lg-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-lg-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-lg-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
}
            

            
* {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
*::before,
            
*::after {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
body {
            
  font-family: 'Barlow', sans-serif;
            
  font-size: 1.125rem;
            
  line-height: 1.5;
            
  color: #787878;
            
  background: #fff;
            
  text-rendering: optimizeLegibility;
            
}
            

            
ul li {
            
  margin: 0 1.5rem 0 0;
            
}
            

            
a {
            
  color: #787878;
            
  text-decoration: none;
            
  -webkit-transition: all 0.2s ease;
            
  -o-transition: all 0.2s ease;
            
  transition: all 0.2s ease;
            
}
            

            
a:hover {
            
  color: #2e2e2e;
            
}
            

            
a.active {
            
  color: #2e2e2e;
            
}
            

            
nav {
            
  padding: 2.5rem 0 2.5rem 0;
            
}
            

            
nav ul {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-pack: left;
            
  -ms-flex-pack: left;
            
  justify-content: left;
            
}
            

            
nav li {
            
  font-size: 1.25rem;
            
}
            

            
nav li:nth-child(2) {
            
  margin: 0;
            
}
            

            
#highlight {
            
  color: #ea8478;
            
  font-size: 1.25rem;
            
}
            

            
.gallery {
            
  padding: 0 0 4rem 0;
            
}
            

            
.img-container {
            
  width: 100%;
            
  height: 500px;
            
  cursor: pointer;
            
  overflow: hidden;
            
}
            

            
.img-container:hover .img-content-hover {
            
  display: block;
            
}
            

            
.moto {
            
  width: 100%;
            
  height: 500px;
            
  -o-object-fit: cover;
            
  object-fit: cover;
            
  -webkit-transform: scale(1);
            
  -ms-transform: scale(1);
            
  transform: scale(1);
            
  -webkit-transition: all 0.3s ease-in-out;
            
  -o-transition: all 0.3s ease-in-out;
            
  transition: all 0.3s ease-in-out;
            
}
            

            
.moto:hover {
            
  -webkit-transform: scale(1.05);
            
  -ms-transform: scale(1.05);
            
  transform: scale(1.05);
            
}
            

            
.img-content-hover {
            
  position: absolute;
            
  z-index: 1;
            
  white-space: nowrap;
            
  display: none;
            
  padding: 1rem;
            
  background: #fff;
            
  font-weight: 400;
            
  margin-top: 1.25rem;
            
  margin-left: -2rem;
            
}
            

            
.title {
            
  color: #2e2e2e;
            
  font-size: 1.5rem;
            
  font-weight: 700;
            
}
            

            
.category {
            
  font-size: 1rem;
            
  color: #787878;
            
}
            

            
.img-content {
            
  display: none;
            
}
            

            
.social,
            
.copyright {
            
  margin: 1rem;
            
}
            

            
.social li {
            
  display: inline-block;
            
}
            

            
footer {
            
  padding: 1rem 0;
            
  background: #23272A;
            
  text-align: center;
            
}
            

            
@supports (display: grid) {
            
  .gallery .grid {
            
    grid-gap: 1rem;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  nav ul {
            
    -webkit-box-pack: right;
            
    -ms-flex-pack: right;
            
    justify-content: right;
            
  }
            
}
            

            
@media screen and (max-width: 1024px) {
            
  img:hover {
            
    -webkit-transform: none;
            
    -ms-transform: none;
            
    transform: none;
            
  }
            
  .img-container {
            
    height: 100%;
            
  }
            
  .img-container:hover .img-content-hover {
            
    display: none;
            
  }
            
  .img-content {
            
    display: block;
            
    padding: 1rem 0;
            
  }
            
}

            <section class="gallery">
            
  <div class="container">
            
    <div class="grid">
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            

            
    </div>
            
  </div>
            
</section>








            share|improve this answer














            The problem is not related to the grip-gap property.



            In fact, both grid-column-gap and grid-row-gap render at equal lengths, as you've specified:



            .gallery .grid {
            
    grid-gap: 1rem;
            
}


            Yes, the gaps appear different.



            enter image description here



            But if you highlight the grid, you'll notice the gaps are the same:



            enter image description here



            (Outlined using Chrome dev tools.)



            The problem is caused by the content of grid items not filling the entire height of each item.



            And that's caused by default margins on the figure element:



            enter image description here



            (Read about the margin-block-* and margin-inline-* properties.)



            So the solution is to override those margins. Add this to your code:



            figure.img-container {
            
  margin: 0;
            
}


            jsFiddle demo






            figure.img-container {
            
  margin: 0;
            
}
            

            
.container {
            
  margin: auto;
            
  padding: 0 1rem;
            
  max-width: 90rem;
            
  width: 100%;
            
}
            

            
.grid {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-orient: vertical;
            
  -webkit-box-direction: normal;
            
  -ms-flex-direction: column;
            
  flex-direction: column;
            
  -ms-flex-flow: row wrap;
            
  flex-flow: row wrap;
            
}
            

            
.grid>[class*="column-"] {
            
  display: block;
            
}
            

            
.first {
            
  -webkit-box-ordinal-group: 0;
            
  -ms-flex-order: -1;
            
  order: -1;
            
}
            

            
.last {
            
  -webkit-box-ordinal-group: 13;
            
  -ms-flex-order: 12;
            
  order: 12;
            
}
            

            
.align-top {
            
  -webkit-box-align: start;
            
  -ms-flex-align: start;
            
  align-items: start;
            
}
            

            
.align-center {
            
  -webkit-box-align: center;
            
  -ms-flex-align: center;
            
  align-items: center;
            
}
            

            
.align-bottom {
            
  -webkit-box-align: end;
            
  -ms-flex-align: end;
            
  align-items: end;
            
}
            

            
.column-xs-1 {
            
  -ms-flex-preferred-size: 8.3333333333%;
            
  flex-basis: 8.3333333333%;
            
  max-width: 8.3333333333%;
            
}
            

            
.column-xs-2 {
            
  -ms-flex-preferred-size: 16.6666666667%;
            
  flex-basis: 16.6666666667%;
            
  max-width: 16.6666666667%;
            
}
            

            
.column-xs-3 {
            
  -ms-flex-preferred-size: 25%;
            
  flex-basis: 25%;
            
  max-width: 25%;
            
}
            

            
.column-xs-4 {
            
  -ms-flex-preferred-size: 33.3333333333%;
            
  flex-basis: 33.3333333333%;
            
  max-width: 33.3333333333%;
            
}
            

            
.column-xs-5 {
            
  -ms-flex-preferred-size: 41.6666666667%;
            
  flex-basis: 41.6666666667%;
            
  max-width: 41.6666666667%;
            
}
            

            
.column-xs-6 {
            
  -ms-flex-preferred-size: 50%;
            
  flex-basis: 50%;
            
  max-width: 50%;
            
}
            

            
.column-xs-7 {
            
  -ms-flex-preferred-size: 58.3333333333%;
            
  flex-basis: 58.3333333333%;
            
  max-width: 58.3333333333%;
            
}
            

            
.column-xs-8 {
            
  -ms-flex-preferred-size: 66.6666666667%;
            
  flex-basis: 66.6666666667%;
            
  max-width: 66.6666666667%;
            
}
            

            
.column-xs-9 {
            
  -ms-flex-preferred-size: 75%;
            
  flex-basis: 75%;
            
  max-width: 75%;
            
}
            

            
.column-xs-10 {
            
  -ms-flex-preferred-size: 83.3333333333%;
            
  flex-basis: 83.3333333333%;
            
  max-width: 83.3333333333%;
            
}
            

            
.column-xs-11 {
            
  -ms-flex-preferred-size: 91.6666666667%;
            
  flex-basis: 91.6666666667%;
            
  max-width: 91.6666666667%;
            
}
            

            
.column-xs-12 {
            
  -ms-flex-preferred-size: 100%;
            
  flex-basis: 100%;
            
  max-width: 100%;
            
}
            

            
@media (min-width: 48rem) {
            
  .column-sm-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-sm-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-sm-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-sm-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-sm-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-sm-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-sm-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-sm-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-sm-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-sm-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-sm-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-sm-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  .column-md-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-md-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-md-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-md-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-md-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-md-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-md-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-md-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-md-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-md-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-md-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-md-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 75rem) {
            
  .column-lg-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-lg-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-lg-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-lg-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-lg-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-lg-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-lg-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-lg-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-lg-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-lg-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-lg-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-lg-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@supports (display: grid) {
            
  .grid {
            
    display: grid;
            
    grid-template-columns: repeat(12, 1fr);
            
    grid-template-rows: auto;
            
  }
            
  .grid>[class*="column-"] {
            
    margin: 0;
            
    max-width: 100%;
            
  }
            
  .column-xs-1 {
            
    grid-column-start: span 1;
            
    grid-column-end: span 1;
            
  }
            
  .column-xs-2 {
            
    grid-column-start: span 2;
            
    grid-column-end: span 2;
            
  }
            
  .column-xs-3 {
            
    grid-column-start: span 3;
            
    grid-column-end: span 3;
            
  }
            
  .column-xs-4 {
            
    grid-column-start: span 4;
            
    grid-column-end: span 4;
            
  }
            
  .column-xs-5 {
            
    grid-column-start: span 5;
            
    grid-column-end: span 5;
            
  }
            
  .column-xs-6 {
            
    grid-column-start: span 6;
            
    grid-column-end: span 6;
            
  }
            
  .column-xs-7 {
            
    grid-column-start: span 7;
            
    grid-column-end: span 7;
            
  }
            
  .column-xs-8 {
            
    grid-column-start: span 8;
            
    grid-column-end: span 8;
            
  }
            
  .column-xs-9 {
            
    grid-column-start: span 9;
            
    grid-column-end: span 9;
            
  }
            
  .column-xs-10 {
            
    grid-column-start: span 10;
            
    grid-column-end: span 10;
            
  }
            
  .column-xs-11 {
            
    grid-column-start: span 11;
            
    grid-column-end: span 11;
            
  }
            
  .column-xs-12 {
            
    grid-column-start: span 12;
            
    grid-column-end: span 12;
            
  }
            
  @media (min-width: 48rem) {
            
    .column-sm-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-sm-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-sm-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-sm-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-sm-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-sm-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-sm-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-sm-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-sm-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-sm-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-sm-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-sm-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 62rem) {
            
    .column-md-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-md-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-md-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-md-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-md-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-md-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-md-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-md-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-md-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-md-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-md-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-md-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 75rem) {
            
    .column-lg-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-lg-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-lg-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-lg-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-lg-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-lg-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-lg-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-lg-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-lg-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-lg-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-lg-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-lg-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
}
            

            
* {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
*::before,
            
*::after {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
body {
            
  font-family: 'Barlow', sans-serif;
            
  font-size: 1.125rem;
            
  line-height: 1.5;
            
  color: #787878;
            
  background: #fff;
            
  text-rendering: optimizeLegibility;
            
}
            

            
ul li {
            
  margin: 0 1.5rem 0 0;
            
}
            

            
a {
            
  color: #787878;
            
  text-decoration: none;
            
  -webkit-transition: all 0.2s ease;
            
  -o-transition: all 0.2s ease;
            
  transition: all 0.2s ease;
            
}
            

            
a:hover {
            
  color: #2e2e2e;
            
}
            

            
a.active {
            
  color: #2e2e2e;
            
}
            

            
nav {
            
  padding: 2.5rem 0 2.5rem 0;
            
}
            

            
nav ul {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-pack: left;
            
  -ms-flex-pack: left;
            
  justify-content: left;
            
}
            

            
nav li {
            
  font-size: 1.25rem;
            
}
            

            
nav li:nth-child(2) {
            
  margin: 0;
            
}
            

            
#highlight {
            
  color: #ea8478;
            
  font-size: 1.25rem;
            
}
            

            
.gallery {
            
  padding: 0 0 4rem 0;
            
}
            

            
.img-container {
            
  width: 100%;
            
  height: 500px;
            
  cursor: pointer;
            
  overflow: hidden;
            
}
            

            
.img-container:hover .img-content-hover {
            
  display: block;
            
}
            

            
.moto {
            
  width: 100%;
            
  height: 500px;
            
  -o-object-fit: cover;
            
  object-fit: cover;
            
  -webkit-transform: scale(1);
            
  -ms-transform: scale(1);
            
  transform: scale(1);
            
  -webkit-transition: all 0.3s ease-in-out;
            
  -o-transition: all 0.3s ease-in-out;
            
  transition: all 0.3s ease-in-out;
            
}
            

            
.moto:hover {
            
  -webkit-transform: scale(1.05);
            
  -ms-transform: scale(1.05);
            
  transform: scale(1.05);
            
}
            

            
.img-content-hover {
            
  position: absolute;
            
  z-index: 1;
            
  white-space: nowrap;
            
  display: none;
            
  padding: 1rem;
            
  background: #fff;
            
  font-weight: 400;
            
  margin-top: 1.25rem;
            
  margin-left: -2rem;
            
}
            

            
.title {
            
  color: #2e2e2e;
            
  font-size: 1.5rem;
            
  font-weight: 700;
            
}
            

            
.category {
            
  font-size: 1rem;
            
  color: #787878;
            
}
            

            
.img-content {
            
  display: none;
            
}
            

            
.social,
            
.copyright {
            
  margin: 1rem;
            
}
            

            
.social li {
            
  display: inline-block;
            
}
            

            
footer {
            
  padding: 1rem 0;
            
  background: #23272A;
            
  text-align: center;
            
}
            

            
@supports (display: grid) {
            
  .gallery .grid {
            
    grid-gap: 1rem;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  nav ul {
            
    -webkit-box-pack: right;
            
    -ms-flex-pack: right;
            
    justify-content: right;
            
  }
            
}
            

            
@media screen and (max-width: 1024px) {
            
  img:hover {
            
    -webkit-transform: none;
            
    -ms-transform: none;
            
    transform: none;
            
  }
            
  .img-container {
            
    height: 100%;
            
  }
            
  .img-container:hover .img-content-hover {
            
    display: none;
            
  }
            
  .img-content {
            
    display: block;
            
    padding: 1rem 0;
            
  }
            
}

            <section class="gallery">
            
  <div class="container">
            
    <div class="grid">
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            

            
    </div>
            
  </div>
            
</section>








            figure.img-container {
            
  margin: 0;
            
}
            

            
.container {
            
  margin: auto;
            
  padding: 0 1rem;
            
  max-width: 90rem;
            
  width: 100%;
            
}
            

            
.grid {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-orient: vertical;
            
  -webkit-box-direction: normal;
            
  -ms-flex-direction: column;
            
  flex-direction: column;
            
  -ms-flex-flow: row wrap;
            
  flex-flow: row wrap;
            
}
            

            
.grid>[class*="column-"] {
            
  display: block;
            
}
            

            
.first {
            
  -webkit-box-ordinal-group: 0;
            
  -ms-flex-order: -1;
            
  order: -1;
            
}
            

            
.last {
            
  -webkit-box-ordinal-group: 13;
            
  -ms-flex-order: 12;
            
  order: 12;
            
}
            

            
.align-top {
            
  -webkit-box-align: start;
            
  -ms-flex-align: start;
            
  align-items: start;
            
}
            

            
.align-center {
            
  -webkit-box-align: center;
            
  -ms-flex-align: center;
            
  align-items: center;
            
}
            

            
.align-bottom {
            
  -webkit-box-align: end;
            
  -ms-flex-align: end;
            
  align-items: end;
            
}
            

            
.column-xs-1 {
            
  -ms-flex-preferred-size: 8.3333333333%;
            
  flex-basis: 8.3333333333%;
            
  max-width: 8.3333333333%;
            
}
            

            
.column-xs-2 {
            
  -ms-flex-preferred-size: 16.6666666667%;
            
  flex-basis: 16.6666666667%;
            
  max-width: 16.6666666667%;
            
}
            

            
.column-xs-3 {
            
  -ms-flex-preferred-size: 25%;
            
  flex-basis: 25%;
            
  max-width: 25%;
            
}
            

            
.column-xs-4 {
            
  -ms-flex-preferred-size: 33.3333333333%;
            
  flex-basis: 33.3333333333%;
            
  max-width: 33.3333333333%;
            
}
            

            
.column-xs-5 {
            
  -ms-flex-preferred-size: 41.6666666667%;
            
  flex-basis: 41.6666666667%;
            
  max-width: 41.6666666667%;
            
}
            

            
.column-xs-6 {
            
  -ms-flex-preferred-size: 50%;
            
  flex-basis: 50%;
            
  max-width: 50%;
            
}
            

            
.column-xs-7 {
            
  -ms-flex-preferred-size: 58.3333333333%;
            
  flex-basis: 58.3333333333%;
            
  max-width: 58.3333333333%;
            
}
            

            
.column-xs-8 {
            
  -ms-flex-preferred-size: 66.6666666667%;
            
  flex-basis: 66.6666666667%;
            
  max-width: 66.6666666667%;
            
}
            

            
.column-xs-9 {
            
  -ms-flex-preferred-size: 75%;
            
  flex-basis: 75%;
            
  max-width: 75%;
            
}
            

            
.column-xs-10 {
            
  -ms-flex-preferred-size: 83.3333333333%;
            
  flex-basis: 83.3333333333%;
            
  max-width: 83.3333333333%;
            
}
            

            
.column-xs-11 {
            
  -ms-flex-preferred-size: 91.6666666667%;
            
  flex-basis: 91.6666666667%;
            
  max-width: 91.6666666667%;
            
}
            

            
.column-xs-12 {
            
  -ms-flex-preferred-size: 100%;
            
  flex-basis: 100%;
            
  max-width: 100%;
            
}
            

            
@media (min-width: 48rem) {
            
  .column-sm-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-sm-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-sm-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-sm-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-sm-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-sm-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-sm-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-sm-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-sm-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-sm-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-sm-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-sm-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  .column-md-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-md-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-md-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-md-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-md-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-md-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-md-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-md-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-md-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-md-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-md-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-md-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 75rem) {
            
  .column-lg-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-lg-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-lg-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-lg-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-lg-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-lg-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-lg-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-lg-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-lg-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-lg-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-lg-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-lg-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@supports (display: grid) {
            
  .grid {
            
    display: grid;
            
    grid-template-columns: repeat(12, 1fr);
            
    grid-template-rows: auto;
            
  }
            
  .grid>[class*="column-"] {
            
    margin: 0;
            
    max-width: 100%;
            
  }
            
  .column-xs-1 {
            
    grid-column-start: span 1;
            
    grid-column-end: span 1;
            
  }
            
  .column-xs-2 {
            
    grid-column-start: span 2;
            
    grid-column-end: span 2;
            
  }
            
  .column-xs-3 {
            
    grid-column-start: span 3;
            
    grid-column-end: span 3;
            
  }
            
  .column-xs-4 {
            
    grid-column-start: span 4;
            
    grid-column-end: span 4;
            
  }
            
  .column-xs-5 {
            
    grid-column-start: span 5;
            
    grid-column-end: span 5;
            
  }
            
  .column-xs-6 {
            
    grid-column-start: span 6;
            
    grid-column-end: span 6;
            
  }
            
  .column-xs-7 {
            
    grid-column-start: span 7;
            
    grid-column-end: span 7;
            
  }
            
  .column-xs-8 {
            
    grid-column-start: span 8;
            
    grid-column-end: span 8;
            
  }
            
  .column-xs-9 {
            
    grid-column-start: span 9;
            
    grid-column-end: span 9;
            
  }
            
  .column-xs-10 {
            
    grid-column-start: span 10;
            
    grid-column-end: span 10;
            
  }
            
  .column-xs-11 {
            
    grid-column-start: span 11;
            
    grid-column-end: span 11;
            
  }
            
  .column-xs-12 {
            
    grid-column-start: span 12;
            
    grid-column-end: span 12;
            
  }
            
  @media (min-width: 48rem) {
            
    .column-sm-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-sm-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-sm-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-sm-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-sm-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-sm-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-sm-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-sm-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-sm-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-sm-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-sm-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-sm-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 62rem) {
            
    .column-md-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-md-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-md-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-md-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-md-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-md-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-md-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-md-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-md-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-md-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-md-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-md-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 75rem) {
            
    .column-lg-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-lg-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-lg-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-lg-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-lg-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-lg-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-lg-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-lg-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-lg-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-lg-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-lg-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-lg-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
}
            

            
* {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
*::before,
            
*::after {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
body {
            
  font-family: 'Barlow', sans-serif;
            
  font-size: 1.125rem;
            
  line-height: 1.5;
            
  color: #787878;
            
  background: #fff;
            
  text-rendering: optimizeLegibility;
            
}
            

            
ul li {
            
  margin: 0 1.5rem 0 0;
            
}
            

            
a {
            
  color: #787878;
            
  text-decoration: none;
            
  -webkit-transition: all 0.2s ease;
            
  -o-transition: all 0.2s ease;
            
  transition: all 0.2s ease;
            
}
            

            
a:hover {
            
  color: #2e2e2e;
            
}
            

            
a.active {
            
  color: #2e2e2e;
            
}
            

            
nav {
            
  padding: 2.5rem 0 2.5rem 0;
            
}
            

            
nav ul {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-pack: left;
            
  -ms-flex-pack: left;
            
  justify-content: left;
            
}
            

            
nav li {
            
  font-size: 1.25rem;
            
}
            

            
nav li:nth-child(2) {
            
  margin: 0;
            
}
            

            
#highlight {
            
  color: #ea8478;
            
  font-size: 1.25rem;
            
}
            

            
.gallery {
            
  padding: 0 0 4rem 0;
            
}
            

            
.img-container {
            
  width: 100%;
            
  height: 500px;
            
  cursor: pointer;
            
  overflow: hidden;
            
}
            

            
.img-container:hover .img-content-hover {
            
  display: block;
            
}
            

            
.moto {
            
  width: 100%;
            
  height: 500px;
            
  -o-object-fit: cover;
            
  object-fit: cover;
            
  -webkit-transform: scale(1);
            
  -ms-transform: scale(1);
            
  transform: scale(1);
            
  -webkit-transition: all 0.3s ease-in-out;
            
  -o-transition: all 0.3s ease-in-out;
            
  transition: all 0.3s ease-in-out;
            
}
            

            
.moto:hover {
            
  -webkit-transform: scale(1.05);
            
  -ms-transform: scale(1.05);
            
  transform: scale(1.05);
            
}
            

            
.img-content-hover {
            
  position: absolute;
            
  z-index: 1;
            
  white-space: nowrap;
            
  display: none;
            
  padding: 1rem;
            
  background: #fff;
            
  font-weight: 400;
            
  margin-top: 1.25rem;
            
  margin-left: -2rem;
            
}
            

            
.title {
            
  color: #2e2e2e;
            
  font-size: 1.5rem;
            
  font-weight: 700;
            
}
            

            
.category {
            
  font-size: 1rem;
            
  color: #787878;
            
}
            

            
.img-content {
            
  display: none;
            
}
            

            
.social,
            
.copyright {
            
  margin: 1rem;
            
}
            

            
.social li {
            
  display: inline-block;
            
}
            

            
footer {
            
  padding: 1rem 0;
            
  background: #23272A;
            
  text-align: center;
            
}
            

            
@supports (display: grid) {
            
  .gallery .grid {
            
    grid-gap: 1rem;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  nav ul {
            
    -webkit-box-pack: right;
            
    -ms-flex-pack: right;
            
    justify-content: right;
            
  }
            
}
            

            
@media screen and (max-width: 1024px) {
            
  img:hover {
            
    -webkit-transform: none;
            
    -ms-transform: none;
            
    transform: none;
            
  }
            
  .img-container {
            
    height: 100%;
            
  }
            
  .img-container:hover .img-content-hover {
            
    display: none;
            
  }
            
  .img-content {
            
    display: block;
            
    padding: 1rem 0;
            
  }
            
}

            <section class="gallery">
            
  <div class="container">
            
    <div class="grid">
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            

            
    </div>
            
  </div>
            
</section>





            figure.img-container {
            
  margin: 0;
            
}
            

            
.container {
            
  margin: auto;
            
  padding: 0 1rem;
            
  max-width: 90rem;
            
  width: 100%;
            
}
            

            
.grid {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-orient: vertical;
            
  -webkit-box-direction: normal;
            
  -ms-flex-direction: column;
            
  flex-direction: column;
            
  -ms-flex-flow: row wrap;
            
  flex-flow: row wrap;
            
}
            

            
.grid>[class*="column-"] {
            
  display: block;
            
}
            

            
.first {
            
  -webkit-box-ordinal-group: 0;
            
  -ms-flex-order: -1;
            
  order: -1;
            
}
            

            
.last {
            
  -webkit-box-ordinal-group: 13;
            
  -ms-flex-order: 12;
            
  order: 12;
            
}
            

            
.align-top {
            
  -webkit-box-align: start;
            
  -ms-flex-align: start;
            
  align-items: start;
            
}
            

            
.align-center {
            
  -webkit-box-align: center;
            
  -ms-flex-align: center;
            
  align-items: center;
            
}
            

            
.align-bottom {
            
  -webkit-box-align: end;
            
  -ms-flex-align: end;
            
  align-items: end;
            
}
            

            
.column-xs-1 {
            
  -ms-flex-preferred-size: 8.3333333333%;
            
  flex-basis: 8.3333333333%;
            
  max-width: 8.3333333333%;
            
}
            

            
.column-xs-2 {
            
  -ms-flex-preferred-size: 16.6666666667%;
            
  flex-basis: 16.6666666667%;
            
  max-width: 16.6666666667%;
            
}
            

            
.column-xs-3 {
            
  -ms-flex-preferred-size: 25%;
            
  flex-basis: 25%;
            
  max-width: 25%;
            
}
            

            
.column-xs-4 {
            
  -ms-flex-preferred-size: 33.3333333333%;
            
  flex-basis: 33.3333333333%;
            
  max-width: 33.3333333333%;
            
}
            

            
.column-xs-5 {
            
  -ms-flex-preferred-size: 41.6666666667%;
            
  flex-basis: 41.6666666667%;
            
  max-width: 41.6666666667%;
            
}
            

            
.column-xs-6 {
            
  -ms-flex-preferred-size: 50%;
            
  flex-basis: 50%;
            
  max-width: 50%;
            
}
            

            
.column-xs-7 {
            
  -ms-flex-preferred-size: 58.3333333333%;
            
  flex-basis: 58.3333333333%;
            
  max-width: 58.3333333333%;
            
}
            

            
.column-xs-8 {
            
  -ms-flex-preferred-size: 66.6666666667%;
            
  flex-basis: 66.6666666667%;
            
  max-width: 66.6666666667%;
            
}
            

            
.column-xs-9 {
            
  -ms-flex-preferred-size: 75%;
            
  flex-basis: 75%;
            
  max-width: 75%;
            
}
            

            
.column-xs-10 {
            
  -ms-flex-preferred-size: 83.3333333333%;
            
  flex-basis: 83.3333333333%;
            
  max-width: 83.3333333333%;
            
}
            

            
.column-xs-11 {
            
  -ms-flex-preferred-size: 91.6666666667%;
            
  flex-basis: 91.6666666667%;
            
  max-width: 91.6666666667%;
            
}
            

            
.column-xs-12 {
            
  -ms-flex-preferred-size: 100%;
            
  flex-basis: 100%;
            
  max-width: 100%;
            
}
            

            
@media (min-width: 48rem) {
            
  .column-sm-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-sm-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-sm-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-sm-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-sm-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-sm-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-sm-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-sm-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-sm-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-sm-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-sm-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-sm-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  .column-md-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-md-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-md-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-md-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-md-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-md-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-md-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-md-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-md-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-md-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-md-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-md-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@media (min-width: 75rem) {
            
  .column-lg-1 {
            
    -ms-flex-preferred-size: 8.3333333333%;
            
    flex-basis: 8.3333333333%;
            
    max-width: 8.3333333333%;
            
  }
            
  .column-lg-2 {
            
    -ms-flex-preferred-size: 16.6666666667%;
            
    flex-basis: 16.6666666667%;
            
    max-width: 16.6666666667%;
            
  }
            
  .column-lg-3 {
            
    -ms-flex-preferred-size: 25%;
            
    flex-basis: 25%;
            
    max-width: 25%;
            
  }
            
  .column-lg-4 {
            
    -ms-flex-preferred-size: 33.3333333333%;
            
    flex-basis: 33.3333333333%;
            
    max-width: 33.3333333333%;
            
  }
            
  .column-lg-5 {
            
    -ms-flex-preferred-size: 41.6666666667%;
            
    flex-basis: 41.6666666667%;
            
    max-width: 41.6666666667%;
            
  }
            
  .column-lg-6 {
            
    -ms-flex-preferred-size: 50%;
            
    flex-basis: 50%;
            
    max-width: 50%;
            
  }
            
  .column-lg-7 {
            
    -ms-flex-preferred-size: 58.3333333333%;
            
    flex-basis: 58.3333333333%;
            
    max-width: 58.3333333333%;
            
  }
            
  .column-lg-8 {
            
    -ms-flex-preferred-size: 66.6666666667%;
            
    flex-basis: 66.6666666667%;
            
    max-width: 66.6666666667%;
            
  }
            
  .column-lg-9 {
            
    -ms-flex-preferred-size: 75%;
            
    flex-basis: 75%;
            
    max-width: 75%;
            
  }
            
  .column-lg-10 {
            
    -ms-flex-preferred-size: 83.3333333333%;
            
    flex-basis: 83.3333333333%;
            
    max-width: 83.3333333333%;
            
  }
            
  .column-lg-11 {
            
    -ms-flex-preferred-size: 91.6666666667%;
            
    flex-basis: 91.6666666667%;
            
    max-width: 91.6666666667%;
            
  }
            
  .column-lg-12 {
            
    -ms-flex-preferred-size: 100%;
            
    flex-basis: 100%;
            
    max-width: 100%;
            
  }
            
}
            

            
@supports (display: grid) {
            
  .grid {
            
    display: grid;
            
    grid-template-columns: repeat(12, 1fr);
            
    grid-template-rows: auto;
            
  }
            
  .grid>[class*="column-"] {
            
    margin: 0;
            
    max-width: 100%;
            
  }
            
  .column-xs-1 {
            
    grid-column-start: span 1;
            
    grid-column-end: span 1;
            
  }
            
  .column-xs-2 {
            
    grid-column-start: span 2;
            
    grid-column-end: span 2;
            
  }
            
  .column-xs-3 {
            
    grid-column-start: span 3;
            
    grid-column-end: span 3;
            
  }
            
  .column-xs-4 {
            
    grid-column-start: span 4;
            
    grid-column-end: span 4;
            
  }
            
  .column-xs-5 {
            
    grid-column-start: span 5;
            
    grid-column-end: span 5;
            
  }
            
  .column-xs-6 {
            
    grid-column-start: span 6;
            
    grid-column-end: span 6;
            
  }
            
  .column-xs-7 {
            
    grid-column-start: span 7;
            
    grid-column-end: span 7;
            
  }
            
  .column-xs-8 {
            
    grid-column-start: span 8;
            
    grid-column-end: span 8;
            
  }
            
  .column-xs-9 {
            
    grid-column-start: span 9;
            
    grid-column-end: span 9;
            
  }
            
  .column-xs-10 {
            
    grid-column-start: span 10;
            
    grid-column-end: span 10;
            
  }
            
  .column-xs-11 {
            
    grid-column-start: span 11;
            
    grid-column-end: span 11;
            
  }
            
  .column-xs-12 {
            
    grid-column-start: span 12;
            
    grid-column-end: span 12;
            
  }
            
  @media (min-width: 48rem) {
            
    .column-sm-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-sm-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-sm-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-sm-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-sm-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-sm-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-sm-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-sm-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-sm-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-sm-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-sm-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-sm-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 62rem) {
            
    .column-md-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-md-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-md-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-md-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-md-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-md-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-md-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-md-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-md-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-md-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-md-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-md-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
  @media (min-width: 75rem) {
            
    .column-lg-1 {
            
      grid-column-start: span 1;
            
      grid-column-end: span 1;
            
    }
            
    .column-lg-2 {
            
      grid-column-start: span 2;
            
      grid-column-end: span 2;
            
    }
            
    .column-lg-3 {
            
      grid-column-start: span 3;
            
      grid-column-end: span 3;
            
    }
            
    .column-lg-4 {
            
      grid-column-start: span 4;
            
      grid-column-end: span 4;
            
    }
            
    .column-lg-5 {
            
      grid-column-start: span 5;
            
      grid-column-end: span 5;
            
    }
            
    .column-lg-6 {
            
      grid-column-start: span 6;
            
      grid-column-end: span 6;
            
    }
            
    .column-lg-7 {
            
      grid-column-start: span 7;
            
      grid-column-end: span 7;
            
    }
            
    .column-lg-8 {
            
      grid-column-start: span 8;
            
      grid-column-end: span 8;
            
    }
            
    .column-lg-9 {
            
      grid-column-start: span 9;
            
      grid-column-end: span 9;
            
    }
            
    .column-lg-10 {
            
      grid-column-start: span 10;
            
      grid-column-end: span 10;
            
    }
            
    .column-lg-11 {
            
      grid-column-start: span 11;
            
      grid-column-end: span 11;
            
    }
            
    .column-lg-12 {
            
      grid-column-start: span 12;
            
      grid-column-end: span 12;
            
    }
            
  }
            
}
            

            
* {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
*::before,
            
*::after {
            
  -webkit-box-sizing: border-box;
            
  box-sizing: border-box;
            
}
            

            
body {
            
  font-family: 'Barlow', sans-serif;
            
  font-size: 1.125rem;
            
  line-height: 1.5;
            
  color: #787878;
            
  background: #fff;
            
  text-rendering: optimizeLegibility;
            
}
            

            
ul li {
            
  margin: 0 1.5rem 0 0;
            
}
            

            
a {
            
  color: #787878;
            
  text-decoration: none;
            
  -webkit-transition: all 0.2s ease;
            
  -o-transition: all 0.2s ease;
            
  transition: all 0.2s ease;
            
}
            

            
a:hover {
            
  color: #2e2e2e;
            
}
            

            
a.active {
            
  color: #2e2e2e;
            
}
            

            
nav {
            
  padding: 2.5rem 0 2.5rem 0;
            
}
            

            
nav ul {
            
  display: -webkit-box;
            
  display: -ms-flexbox;
            
  display: flex;
            
  -webkit-box-pack: left;
            
  -ms-flex-pack: left;
            
  justify-content: left;
            
}
            

            
nav li {
            
  font-size: 1.25rem;
            
}
            

            
nav li:nth-child(2) {
            
  margin: 0;
            
}
            

            
#highlight {
            
  color: #ea8478;
            
  font-size: 1.25rem;
            
}
            

            
.gallery {
            
  padding: 0 0 4rem 0;
            
}
            

            
.img-container {
            
  width: 100%;
            
  height: 500px;
            
  cursor: pointer;
            
  overflow: hidden;
            
}
            

            
.img-container:hover .img-content-hover {
            
  display: block;
            
}
            

            
.moto {
            
  width: 100%;
            
  height: 500px;
            
  -o-object-fit: cover;
            
  object-fit: cover;
            
  -webkit-transform: scale(1);
            
  -ms-transform: scale(1);
            
  transform: scale(1);
            
  -webkit-transition: all 0.3s ease-in-out;
            
  -o-transition: all 0.3s ease-in-out;
            
  transition: all 0.3s ease-in-out;
            
}
            

            
.moto:hover {
            
  -webkit-transform: scale(1.05);
            
  -ms-transform: scale(1.05);
            
  transform: scale(1.05);
            
}
            

            
.img-content-hover {
            
  position: absolute;
            
  z-index: 1;
            
  white-space: nowrap;
            
  display: none;
            
  padding: 1rem;
            
  background: #fff;
            
  font-weight: 400;
            
  margin-top: 1.25rem;
            
  margin-left: -2rem;
            
}
            

            
.title {
            
  color: #2e2e2e;
            
  font-size: 1.5rem;
            
  font-weight: 700;
            
}
            

            
.category {
            
  font-size: 1rem;
            
  color: #787878;
            
}
            

            
.img-content {
            
  display: none;
            
}
            

            
.social,
            
.copyright {
            
  margin: 1rem;
            
}
            

            
.social li {
            
  display: inline-block;
            
}
            

            
footer {
            
  padding: 1rem 0;
            
  background: #23272A;
            
  text-align: center;
            
}
            

            
@supports (display: grid) {
            
  .gallery .grid {
            
    grid-gap: 1rem;
            
  }
            
}
            

            
@media (min-width: 62rem) {
            
  nav ul {
            
    -webkit-box-pack: right;
            
    -ms-flex-pack: right;
            
    justify-content: right;
            
  }
            
}
            

            
@media screen and (max-width: 1024px) {
            
  img:hover {
            
    -webkit-transform: none;
            
    -ms-transform: none;
            
    transform: none;
            
  }
            
  .img-container {
            
    height: 100%;
            
  }
            
  .img-container:hover .img-content-hover {
            
    display: none;
            
  }
            
  .img-content {
            
    display: block;
            
    padding: 1rem 0;
            
  }
            
}

            <section class="gallery">
            
  <div class="container">
            
    <div class="grid">
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/8b1cWDyvT7Y" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Smart Watch</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Smart Watch</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/5VXH4RG88gc" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Camera Film</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Camera Film</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-4">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/XtUd5SiX464">
            
          <figcaption class="img-content">
            
            <h2 class="title">Coffee</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Coffee</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/JYGnB9gTCls" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Phone</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Phone</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            
      <div class="column-xs-12 column-md-6">
            
        <figure class="img-container">
            
          <img class="moto" src="https://source.unsplash.com/-RBuQ2PK_L8" />
            
          <figcaption class="img-content">
            
            <h2 class="title">Keyboard</h2>
            
            <h3 class="category">Showcase</h3>
            
          </figcaption>
            
          <span class="img-content-hover">
            
                            <h2 class="title">Keyboard</h2>
            
                            <h3 class="category">Showcase</h3>
            
                        </span>
            
        </figure>
            
      </div>
            

            
    </div>
            
  </div>
            
</section>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 11 at 15:40

























            answered Nov 11 at 12:55









            Michael_B

            144k47229338




            144k47229338








            • 1




              I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
              – Jenson Varghese
              Nov 12 at 0:21














            • 1




              I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
              – Jenson Varghese
              Nov 12 at 0:21








            1




            1




            I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
            – Jenson Varghese
            Nov 12 at 0:21




            I managed to figure it out but your explanation and links helped improve my understanding of the problem, thank you for taking time out of your day to do so!
            – Jenson Varghese
            Nov 12 at 0:21













            0














            There seems to be some default margin added which threw the whole grid off whack, it has been found and resolved. Many thanks!






            share|improve this answer


























              0














              There seems to be some default margin added which threw the whole grid off whack, it has been found and resolved. Many thanks!






              share|improve this answer
























                0












                0








                0






                There seems to be some default margin added which threw the whole grid off whack, it has been found and resolved. Many thanks!






                share|improve this answer












                There seems to be some default margin added which threw the whole grid off whack, it has been found and resolved. Many thanks!







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 11 at 9:57









                Jenson Varghese

                173




                173






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247483%2fgrid-gap-inconsistent-between-rows-and-columns%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    這個網誌中的熱門文章

                    Academy of Television Arts & Sciences

                    圖片
                    American television organization Academy of Television Arts & Sciences Founded 1946 ; 73 years ago  ( 1946 ) Location North Hollywood, California, United States Area served Television industry Product Emmy Awards Key people Frank Scherma ( Chairman and CEO ) Website televisionacademy.com [redirects to emmys.com , official website of the Emmys and the Television Academy The Academy of Television Arts & Sciences ( ATAS ), also colloquially known as the Television Academy , is a professional honorary organization dedicated to the advancement of the television industry in the United States. Founded in 1946, the organization presents the Primetime Emmy Awards, an annual ceremony honoring achievement in U.S. primetime television. Contents 1 History 2 Emmy Award 3 Publications and programs 4 Current governance 4.1 Board of Governors 5 Television Academy honors 5.1 1st Annual (2008) 5.2 2nd Annual (2009)...
                    閱讀完整內容

                    L'Équipe

                    圖片
                    For other uses, see Équipe (disambiguation). L'Équipe The front page of L'Équipe on 4 July 2011 Type Daily newspaper Format Tabloid Owner(s) Éditions Philippe Amaury Editor François Morinière Editor-in-chief Fabrice Jouhaud Founded 1946 Language French Headquarters Boulogne-Billancourt ISSN 0153-1069 Website www.lequipe.fr L'Équipe ( pronounced  [lekip] , French for "the team") is a French nationwide daily newspaper devoted to sport, owned by Éditions Philippe Amaury. The paper is noted for coverage of association football , rugby, motorsport and cycling. Its predecessor was L'Auto , a general sports paper whose name reflected not any narrow interest but the excitement of the time in car racing. L'Auto originated the Tour de France cycling stage race in 1903 as a circulation booster. The race leader's yellow jersey (French: maillot jaune ) was instituted in 1919, probably to reflect the dist...
                    閱讀完整內容

                    1995 France bombings

                    圖片
                    This article is a rough translation from French . It may have been generated by a computer or by a translator without dual proficiency. Please help to enhance the translation. The original article is under "français" in the "languages" sidebar. See this article's entry on Pages needing translation into English for discussion. 1995 France bombings Part of Algerian Civil War (spillover) Plaque commemorating the victims of the Saint-Michel station bombing on 25 July 1995 Location Paris and Lyon, France Date 25 July 1995  ( 1995-07-25 ) – 17 October 1995  ( 1995-10-17 ) Weapons Improvised explosive devices, school bombing Deaths 8 Non-fatal injuries 157 Perpetrator Armed Islamic Group Motive To induce the French government to withdraw support from the Algerian government during the Algerian Civil War The 1995 bombings in France were carried out by the Armed Islamic Group (GIA), who were broadening the Alger...
                    閱讀完整內容