CSS grid-gap

The <grid-gap>, along with <row-gap> and <column-gap> properties, controls spacing between grid layouts. With these, we can separate elements easily without using extra margins.

Uniform spacing with grid-gap

The <grid-gap> property is shorthand for setting both row and column spacing. This is a simple way to make a grid neat and readable.

The following example shows how to create a two-column grid with 20px spacing between cells.

Controlling row and column spacing separately

The <row-gap> and <column-gap> properties allow us to set row and column spacing independently. This is useful when aiming for different layouts.

In this example, the row spacing is 10px, while the column spacing is 30px.

Tips for using grid-gap

Setting spacing improves the website’s visual structure and user experience. Here are some useful tips:

• Use <grid-gap> instead of margins when you need uniform grid spacing.
• For mobile views, use smaller gap values to better fit the screen.
• Combine <row-gap> and <column-gap> when you want different row and column spacing.