Grid gutters

grid-gap

Use this property to define the width and height of the gutters between columns and rows.

Note: this property should be specified using its new name gap. It's old name grid-gap will be retired.

Property values

This property sets both the row-gap and the column-gap. Specify one value that applies to both, or specify two values row-gap first followed by column-gap.

Specify these values using percentages or lengths:

%	percentage	A percentage of the total width or height
em	em	The `font-size` of the current font
rem	relative em	The `font-size` of the <html> element
lh	line height	The `line-height` of the current font
rlh	relative line height	The `line-height` of the <html> element
cap	cap height	The nominal height of the current font's capital letters
ex	"x"	The height of the current font's "x" glyph
ch	"0"	The advance measure (the width) of the current font's "0" glyph
ic	ideograph count	The advance measure (the width) of the current font's "水" ideograph

Or use these viewport-percentage units which account for different display device capabilities:

vh	viewport height	1% of the viewport's height
vw	viewport width	1% of the viewport's width
vi	viewport inline axis	1% of the viewport's inline axis
vb	viewport block axis	1% of the viewport's block axis
vmin	viewport minimum	Either vh or vw, whichever is smaller
vmax	viewport maximum	Either vh or vw, whichever is larger

Or use any of these fixed size units which are independent of the current font:

in	inch	A size equal 96px
px	pixels	A size equal to 1/96 inch
pt	point	A size equal 1in/72 = 1.33px
pc	pica	A size equal 1in/6 = 12pt = 16px
cm	centimeter	A size equal to 96px/2.54 = 37.8px
mm	millimeter	A size equal to 96px/25.4 = 3.8px
Q	quarter millimeter	A size equal to 96px/1016 = 0.94px

Examples

/* 2rem between rows, and 1rem between columns */            
gap: 2rem 1rem;

/* 10px between both rows and columns */
gap: 10px;

gap