The gap property in CSS is used to create space between items inside Flexbox, Grid, and Multi-column layouts. It is cleaner than using margins because it only adds spacing between elements, not around the outside.
HTML Code
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS Code
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 150px);
gap: 20px;
}
.grid-container div {
background: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
