<div class="wrapper">
<div class="item">
<div class="logo"></div>
</div>
<div class="item">
<div class="logo"></div>
</div>
<div class="item">
<div class="logo"></div>
</div>
<div class="item">
<div class="logo"></div>
</div>
<div class="item">
<div class="logo"></div>
</div>
<div class="item">
<div class="logo"></div>
</div>
<div class="item">
<div class="logo"></div>
</div>
</div>
* {
box-sizing: border-box;
}
.wrapper {
max-width: calc(7 * 100px);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
justify-content: center;
}
.item {
width: 100px;
height: 100px;
padding: 5px;
}
.logo {
width: 100%;
height: 100%;
background: #424ef5;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.