HTML
CSS
JavaScript
<div class='grid-container'> <div class='grid-item item1'>Item 1</div> <div class='grid-item item2'>Item 2</div> <div class='grid-item item3'>Item 3</div> <div class='grid-item item4'>Item 4</div> </div>
.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; } .grid-item { background-color: lightblue; padding: 20px; text-align: center; } .item2 { grid-column-start: 2; grid-column-end: 4; } .item3 { grid-column-start: 1; grid-column-end: 3; }
// No JavaScript required for this demo
Item 1
Item 2
Item 3
Item 4