<div class="cards">
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Coloured balloon">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/champagne-balloons.jpg" alt="Fortnum and Mason balloon">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/funfair-balloons.jpg" alt="Funfair">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/swatch.jpg" alt="Swatch Balloon">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/minion.jpg" alt="Minion Balloon">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/where-is-the-basket.jpg" alt="Balloonist">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/pink-balloon.jpg" alt="Balloon">
</div>
</div>
.cards {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
}
.cards img {
object-fit: cover;
width: 100%;
height: 200px;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fafafa;
}
img {
max-width: 100%;
display: block;
}
.cards {
margin: 0 auto;
max-width: 800px;
}
.card {
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
This Pen doesn't use any external JavaScript resources.