<div class="container">
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/k6x0uh8l4bz2vtoqoqfe.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/jcxndso6jdqhon8fqvgl.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/x9wvdm7p41vmn65xwue2.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/ygvvvsr7eabhjyonrbeu.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/wobux0mirfyoyvns1jed.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/zhfbhbrzlhznrrsmwv5l.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/k6x0uh8l4bz2vtoqoqfe.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582698552/posts/fxcvhkiws6std1qiyc5o.jpg">
</a>
<a href="#" class="item">
<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582702766/posts/k6x0uh8l4bz2vtoqoqfe.jpg">
</a>
</div>
.container {
max-width: 300px;
margin: 1rem auto;
display: flex; /* 横並び */
flex-wrap: wrap; /* 折り返す */
}
.item {
position: relative;
width: 33.3%; /* 幅 */
padding-bottom: 33.3%; /* 幅と同じ高さをつくる */
border: solid 2px #FFF; /* 白の枠線 */
box-sizing: border-box;
}
.item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.