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;