Gap in CSS Grid

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>