<div class="container first">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container second">
<div class="one">1</div>
<div>2</div>
<div>3</div>
<div class="four">4</div>
</div>.container {
margin: 10px auto;
border: 1px solid grey;
width: 300px;
height: 200px;
display: grid;
grid-template-columns: repeat(4, 1fr);
&.first {
align-items: center;
justify-items: center;
}
&.second {
align-items: center;
justify-items: center;
}
div {
box-sizing: border-box;
width: 50px;
height: 50px;
border: 1px solid blue;
background-color: blue;
background-clip: content-box;
padding: 10px;
}
.one {
justify-self: end;
}
.four {
justify-self: start;
}
}
External CSS
This Pen doesn't use any external CSS resources.