HTML & CSS reference

gap

The gaps between items in flexbox and grid.

Syntax

gap: row-gap column-gap;

Values

Parameter	Type	Description
one value	length	The same gap between rows and columns: `16px`.
two values	length	Between rows, then between columns: `24px 8px`.

Examples

Gaps between items in a row:

<style>
  .row { display: flex; gap: 16px; }
  .row div { padding: 8px; background: lightskyblue; }
</style>
 
<div class="row"><div>One</div><div>Two</div><div>Three</div></div>

Different gaps between rows and columns:

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 8px; }
  .grid div { padding: 8px; background: palegreen; }
</style>
 
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>

Notes

gap adds space only between items, not at the container edges — unlike margin on each item, nothing needs to be removed from the last one. Separate properties: row-gap and column-gap.

Related recipes

In the tutorial

Flexbox — Laying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.

Thanks for reading!

gap