Difference between CSS grid `grid-auto-columns` vs `grid-template-columns`?

Question

When using display: grid what's the difference between grid-auto-columns and grid-template-columns?

Answer 1

The difference is with grid-auto-columns let the columns adjust automatically to its value and grid-template-columns require you set the exact grid you are looking for.

The most common alternative should be grid-template-columns as probably the reason you are using CSS-grid is to set a little more complex design.

I put some examples to show the difference, what you will see it is:

A two columns created with:

grid-auto-columns: 100px;

and to achieve the same with template columns:

grid-template-columns: 100px 100px;

In case you want to add a third column, grid-auto-columns keep the same, but for template-columns is:

grid-template-columns: 100px 100px 100px;

In case you don't define this third column, the element will use the available area

1.- grid-auto-columns

Sets a default grid size. You can add as many columns as you want and they will be set automatically to this value.

Usage

In this example, we will set the grid as auto for using full width:

.grid {
  display: grid;
  grid-auto-columns: 100px;
}

.div-1 { grid-area: 1 / 1 / 1 / 2; }
.div-2 { grid-area: 1 / 2 / 2 / 3; }
.div-3 { grid-area: 1 / 3 / 3 / 4; }

/* just for the example */
div {
  border: 1px solid blue;
  padding:20px;
}

<h3>2 columns:</h3>
<div class="grid">
  <div class="div-1">col 1</div> 
  <div class="div-2">col 2</div>
</div>

<h3>3 columns:</h3>
<div class="grid">
  <div class="div-1">col 1</div> 
  <div class="div-2">col 2</div> 
  <div class="div-3">col 3</div>
</div>

2.- grid-template-columns

Sets the width of the columns. If there is an extra column defined, the unmatched column will use the rest of the space, creating unexpected results.

Usage

Same layout result than grid-auto-columns

.grid {
  display: grid;
  /* Define 2 columns */
  grid-template-columns: 100px  100px;
}

.div-1 { grid-area: 1 / 1 / 1 / 2; }
.div-2 { grid-area: 1 / 2 / 2 / 3; }
.div-3 { grid-area: 1 / 3 / 3 / 4; }

/* just for the example */
div {
  border: 1px solid blue;
  padding:20px;
}

.redefine-grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

<h3>2 columns:</h3>
<div class="grid">
  <div class="div-1">col 1</div> 
  <div class="div-2">col 2</div>
</div>

<h3>3 columns without redefine columns:</h3>
<div class="grid">
  <div class="div-1">col 1</div> 
  <div class="div-2">col 2</div>
  <div class="div-3">col 2</div>
</div>

<h3>3 columns with redefined columns:</h3>
<div class="redefine-grid">
  <div class="div-1">col 1</div> 
  <div class="div-2">col 2</div>
  <div class="div-3">col 2</div>
</div>

Answer 2

According to Mozilla

grid-template-columns The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.

grid-auto-columns The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

My interpretation is

In grid-template-columns you are the one in charge of defining how the layout should look exactly.

With grid-auto-columns you give a suggestion on how you are expecting to present the information but ultimately the browser takes the decision based on your guidelines.