When using column-gap for a grid which should be used?

These both work.
grid-column-gap: 4px;
column-gap: 4px;

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  column-gap: 4px;
  grid-column-gap: 4px;
  grid-template-columns: repeat(5, 1fr);
  /* justify-content:space-between; */
  align-content: space-between;
  min-height: 174px;
}

I did find this:

Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.

CSS Grid Layout initially defined the grid-column-gap property. This prefixed property is being replaced by column-gap . However, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property as in the second interactive example above.

1 Like

The property column-gap was previously used in CSS columns but may now be used in grid & flex layout as per the new box-alignment specs.

You can read the details here.

I guess support for grid-column-gap is better at the moment but eventually column-gap will probably be the default one to use.

1 Like

You could do away with the column gap properties if you just auto fill like this:

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, auto));
  justify-content:space-between; 
  align-content: space-between;
  min-height: 174px;
}

Not better just different :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.