Gap in CSS

From the CSS Flexbox cheat sheet · Flex Container · verified Jul 2026

Gap

Add consistent spacing between flex items without using margins

css

.container {
  gap: 10px;           /* row and column gap */
  column-gap: 20px;    /* column gap only */
  row-gap: 10px;       /* row gap only */
  gap: 10px 20px;      /* row column */
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

🎨 Gap Demo

✨ Spacing between items

💡 Replaces margin hacks

📏 Works with wrap

More CSS tasks

Create Flex Container
Flex Direction
Flex Wrap

Back to the full CSS Flexbox cheat sheet