gap sets row and column spacing. The responsive magic is grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) — it fits as many ≥200px columns as the width allows, reflowing automatically. One line replaces a stack of media queries.
gap sets row and column spacing. The responsive magic is grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) — it fits as many ≥200px columns as the width allows, reflowing automatically. One line replaces a stack of media queries.
<!doctype html><html><head><meta charset="utf-8">
<style>.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.g div{background:#b388ff;color:#06040d;padding:18px;text-align:center}</style></head><body style="background:#06040d;padding:20px"><div class="g"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></body></html>