HTML
CSS
JavaScript
<div class='container'><div class='item'>Item 1</div><div class='item'>Item 2</div><div class='item'>Item 3</div></div>
.container { display: grid; grid-template-columns: repeat(3, 1fr); height: 100vh; } .item { background-color: lightblue; border: 2px solid blue; padding: 20px; text-align: center; } .item:nth-child(1) { place-self: center; } .item:nth-child(2) { place-self: start; } .item:nth-child(3) { place-self: end; }
// No JavaScript required for this demo
Item 1
Item 2
Item 3