column-gap (grid-column-gap)
Definition
The column-gap CSS property sets the size of the gap between columns in a multi-column layout.
Examples
Specifies a gap size of 10 pixels between columns. This value can be any CSS length unit (e.g. px, em, rem):
column-gap: 10px;
Specifies a gap size of 1.5 times the current font size:
column-gap: 1.5em;
Specifies a gap size equal to the default font size. This value is a common starting point, but the actual size may vary depending on the font family and size used:
column-gap: normal;
Values
| Value | Description |
|---|---|
| length | Specifies the gap size in any CSS length unit (e.g. px, em, rem). |
| normal | Specifies a normal gap size, which is typically the default font size. |
Best Practices
- Choose a column-gap size that enhances the readability of the content and fits the overall design of the layout.
- Use normal as a starting point, and adjust the gap size based on the layout and font size.
- Consider using media queries to adjust the column-gap size based on the screen size.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |