<html lang="en">
<head>
 <title>Grid Card Layout</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

 <div id="pagewrap">
  <div class="gallery">
   <article class="image">
    <img src="https://res.cloudinary.com/dnroxbmjk/image/upload/v1462049388/img01_wqwpnu.jpg"/>
    <p>Text</p>
   </article>

   <article class="image">
    <img src="https://res.cloudinary.com/dnroxbmjk/image/upload/v1462049389/img02_f4vcdt.jpg
"/>
    <p>Text</p>
   </article>

   <article class="image">
    <img src="https://res.cloudinary.com/dnroxbmjk/image/upload/v1462049386/img03_n0asvf.jpg"/>
    <p>Text</p>
   </article>

   <article class="image">
    <img src="https://res.cloudinary.com/dnroxbmjk/image/upload/v1462049386/img04_iypkrg.jpg"/>
    <p>Text</p>
   </article>

   <article class="image">
    <img src="https://res.cloudinary.com/dnroxbmjk/image/upload/v1462049386/img05_r60xhy.jpg"/>
    <p>Text</p>
   </article>

   <article class="image">
    <img src="https://res.cloudinary.com/dnroxbmjk/image/upload/v1462049386/img06_ziqnpg.jpg"/>
    <p>Text</p>
   </article>

  </div>
 </div>

</body>
</html>

*{
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 -moz-box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body{
 font-size: 16px;
 font-family: monospace, "Helvetica Neue", Helvetica, Verdana, sans-serif;
 background-color: #1abc9c;
 text-align: center;
 color: #666;
}

#pagewrap{
 max-width: 960px;
 width: 100%;
 margin: 0 auto;
}

.gallery{
 width: 100%;
 margin: 0 auto;
 padding: 10vh 5vh;
 display: flex;
 flex-wrap: wrap;
}

.image{
 width: 28%;
 border: 1.5px solid #ccc;
 padding: 10px;
 margin: 2% 1.5%;
 flex-grow: 1;
 background-color: #ecf0f1;
}

.image img{
 max-width: 100%;
 margin: 0 auto;
}

.image:hover{
 box-shadow: 0 1px 30px rgba(0,0,0,.3);
 transform: scale(1.10);
 border: none;
 transition: box-shadow 0.2s ease, transform 0.2s ease;
 z-index: 1;
}

.image p{
 padding: 10px;
}

/*@media (max-width: 900px){
 .image{
  width: 45%;
 }
  .gallery{
    padding: 10vh 1vh;
  }
}

@media (max-width: 600px){
 .image{
  width: 50%;
 }
}*/
/****

Github: https://github.com/mariacheline/Flexbox-Grid-Gallery

****/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.