CodeLab
Tutorials For Everyone
Run
<!DOCTYPE html> <html> <head> <style> /* ============== Grid Column Gap ============== */ .grid-container { display: grid; grid-template-columns: auto auto auto; column-gap: 15px; background: #333; } .grid-item { position: relative; background: #97ff99; text-align: center; border: 1px solid #333; padding: 10px; height: 50px; line-height: 50px; } /* ============== Grid Column Gap ============== */ </style> </head> <body> <h1 class="heading">Grid Column Gap</h1> <p class="description">We can create gap between the columns of the grid using <strong>column-gap</strong> or <strong>grid-column-gap</strong> properties.</p> <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 class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> </body> </html>