Why are there extra columns added in CSS Grid when using grid-auto-flow?

Question

I am learning CSS Grid and trying to reproduce some flex behaviour (I know that both are complementary, this is a learning exercise).

The flex example below allows for an undefined number of divs to be stacked (undefined in the sense that their number does not impact the CSS part)

#flex {
  height: 100px;
  display: flex;
  flex-direction: row;
}

#flex > div {
  background-color: blue;
}

<div id="flex">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

I tried to port this to a CSS Grid implementation:

/* updated with correct comment delimiters, thanks @vals */

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;  /* when something has to be added, be it a column */
  grid-auto-columns: fit-content; /* when a new column is added, its size will be driven by the content. Unfortunately this does not work yet but never mind for now */
  grid-row: auto; /* one row, auto-sized */
}

#grid > div {
  background-color: lime;
}

<div id="grid">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

The fact that the width of the cells is not as expected (per the comments) is something I will investigate later, my main problem is that there are three extra columns, one before each of the expected ones.

When inspecting the grid, I can see that some of the lines are plain, while others are dotted (I am not sure whether this is an indication of something):

Are the blanks extra columns?

• if yes: where do they come from?
• if not: are they some kind of padding, and why isn't the column taking all the available space then?

Answer 1

In your container code:

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;  
  grid-auto-columns: fit-content; 
  grid-row: auto;
}

The grid-row rule is having no effect. This property applies only to grid items.

You may be wanting grid-template-rows or grid-auto-rows, which apply to grid containers.

Also, before editing your question, you were using an invalid form of comments in your CSS. That was causing a syntax error.

The problem is explained here:

• Why are some of my CSS rules not working?

Answer 2

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content; 
}

#grid > div {
  background-color: lime;
}

<div id="grid">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

At grid-auto-columns: fit-content;, you probably meant max-content. grid-row is unnecessary.

Also, as mentioned by @vals in the comments, you had   line breaks.

A good resource to read about grids is at CSS Tricks.