<figure>
<div class="container auto-fill">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/eyes-like-the-sky.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/gumboot-soup.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/microtonal-banana.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/polygondwanaland.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/twelve-bar-bruise.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/quarters.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/sketches-of-brunswick-east.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/nonagon-infinity.jpg" alt="">
</div>
<figcaption>auto-fill</figcaption>
</figure>
<figure>
<div class="container auto-fit">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/eyes-like-the-sky.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/gumboot-soup.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/microtonal-banana.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/polygondwanaland.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/twelve-bar-bruise.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/quarters.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/sketches-of-brunswick-east.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/nonagon-infinity.jpg" alt="">
</div>
<figcaption>auto-fit</figcaption>
</figure>
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
input {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
min-height: 100%;
}
img,
embed,
object,
video {
max-width: 100%; // without it images break away from columns
height: auto;
}
.container {
display: grid;
grid-gap: 5px;
background: whitesmoke;
}
.auto-fill {
grid-template-columns: repeat(auto-fill, 100px);
}
.auto-fit {
grid-template-columns: repeat(auto-fit, 100px);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.