CSS Gap Generator

Generate CSS gap property for Flexbox and Grid layouts

Controls

Layout Type

Row Gap: 16px

Column Gap: 16px

Unit

The gap property sets the spacing between rows and columns in Grid and Flexbox layouts. It's a shorthand for row-gap and column-gap.

CSS Code

.container {
  display: grid;
  gap: 16px;
}

The gap property is widely supported in modern browsers for both Grid (2017+) and Flexbox (2021+).