CSS columns have a horizontal gap?

Question

I am having some issue trying to align css columns and a grid. Do css columns have some horizontal gap by default? If so, how to configure it?

Answer 1

Yes. But you can get rid of it by setting column-gap to 0:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.grid>div {
  height: 40px;
}

.css-cols {
  columns: 4;
  column-gap:0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.css-cols li {
  height: 20px;
  margin-bottom: 5px;
}

.grid>div:nth-child(odd),
.css-cols li:nth-child(odd) {
  background: black;
}

.grid>div:nth-child(even),
.css-cols li:nth-child(even) {
  background: red;
}

<div class="grid">
  <div></div>
  <div></div>
</div>

<ul class="css-cols">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

The browser's default spacing is used between columns. For multi-column layout this is specified as 1em.

Answer 2

In this you can use the for column gap is

grid-column-gap

and for row you can use

grid-row-gap

and i suggest you use this shortcut key

grid-gap

this is for both row and column