Difference between 'grid-template-columns: repeat(auto-fill)' and 'grid-auto-columns'

Question

What is the difference between:

display: grid;
grid-template-columns: repeat(auto-fill, 100px);

and

display: grid;
grid-auto-columns: 100px;

It would appear that using repeat(auto-fill) is superfluous by the existence of grid-auto-columns?

Answer 1

grid-template-columns: repeat(auto-fill, 100px); will create a grid with variable number of columns having 100px width. The number we be the maximum one allowing the columns to not overflow.

grid-auto-columns: 100px; will define the width of the columns to be equal to 100px (if no template is specified, otherwise only implcit columns will get affected). It won't do the same as grid-template-columns: repeat(auto-fill, 100px);

Some examples to illustrate:

.box {
  display:grid;
  grid-gap:5px;
  border:1px solid;
  margin:5px;
}


.box  * {
  height:50px;
  background:red;
}

<div class="box" style="grid-template-columns: repeat(auto-fill, 100px);">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>

the default flow
<div class="box" style="grid-auto-columns:100px;">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
column flow:
<div class="box" style="grid-auto-columns:100px;grid-auto-flow:column">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container ^ref

and

The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns. ^ref