HTML
CSS
JavaScript
<div class='grid-container'> <div class='grid-item'>Item 1</div> <div class='grid-item'>Item 2</div> <div class='grid-item'>Item 3</div> <div class='grid-item'>Item 4</div> <div class='grid-item'>Item 5</div> </div>
.grid-container { display: grid; grid-template-columns: repeat(2, 100px); grid-auto-columns: 150px; grid-auto-flow: column; grid-gap: 10px; background-color: #f0f0f0; padding: 10px; } .grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #333; }
// No JavaScript required for this demo
Item 1
Item 2
Item 3
Item 4
Item 5