css-column-gap/src/css-column-gap.css

Css module of single purpose classes for column gap

/*
   COLUMN GAP
*/

.cg-1 { column-gap: 1rem; }
.cg-2 { column-gap: 2rem; }
.cg-3 { column-gap: 4rem; }
.cg-n { column-gap: normal; }
.cg-i { column-gap: inherit; }

@media screen and (min-width: 48em) {
  .cg-1-ns { column-gap: 1rem; }
  .cg-2-ns { column-gap: 2rem; }
  .cg-3-ns { column-gap: 4rem; }
  .cg-n-ns { column-gap: normal; }
  .cg-i-ns { column-gap: inherit; }
}

@media screen and (min-width:48em) and (max-width: 64em) {
  .cg-1-m { column-gap: 1rem; }
  .cg-2-m { column-gap: 2rem; }
  .cg-3-m { column-gap: 4rem; }
  .cg-n-m { column-gap: normal; }
  .cg-i-m { column-gap: inherit; }
}

@media screen and (min-width: 64em) {
  .cg-1-l { column-gap: 1rem; }
  .cg-2-l { column-gap: 2rem; }
  .cg-3-l { column-gap: 4rem; }
  .cg-n-l { column-gap: normal; }
  .cg-i-l { column-gap: inherit; }
}