Uses: column-gap
and row-gap
to separate the grid items
.grid-container { display: inline-grid; grid-template-columns: auto auto auto; column-gap: 50px; row-gap: 20px; background-color: indianred; padding: 10px; } .grid-item { background-color: powderblue; text-align: center; padding: 20px; font-size: 30px; }
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>