Grid column gutters

grid-column-gap

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

Note: this property should be specified using its new name column-gap. Its old name grid-column-gap will be retired.

Property values

Specify the width of gutters between columns in grids, flexboxes, and multi-column layouts.

Specify these values using percentages or lengths:

% percentage A percentage of the total width
em em The font-size of the current font
rem relative em The font-size of the <html> element
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

/* 10px between columns */
column-gap: 10px;
column-gap

style > grid > grid-column-gapGrid column gutters

🔎