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?

Intine

Answer 1

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.

Torrid

Answer 2

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>

Showcase

Answer 3

Because the structure and syntax of the grid-template-* and grid-auto-* property names have some similarities, it can be easy to think the values they accept and therefore what they achieve, are similar as well. On the contrary, these properties are doing very different things.

While the grid-template-* properties are used to define both the position and size of grid cells, the grid-auto-* properties are used only to define the size of grid cells.

This difference becomes apparent when you consider what these properties are for. The grid-template-* properties are used to create an explicit grid, whereas th grid-auto-* properties are used to size an implicit grid (which is automatically created).

How grid-template works : visit this link for full detail Link

Neurologist

Answer 4

The grid-auto-columns (MDN) property in CSS grid is used to specify the size of columns that are automatically created by the grid when you place elements that are not explicitly placed in specific columns. In other words, it defines the size of any "implicit" columns that are created by the grid.

On the other hand, the grid-template-columns (MDN) property is used to define the explicit columns of the grid. This means that you can use it to specify the number of columns in the grid, as well as their sizes. The columns you define with grid-template-columns will always be present in the grid, even if there are no elements placed in them.

In short, grid-auto-columns is used to define the size of implicit columns, while grid-template-columns is used to define the size of explicit columns. These properties can be used together to create a grid with both implicit and explicit columns, with the implicit columns taking on the size specified by grid-auto-columns and the explicit columns taking on the size specified by grid-template-columns.

I hope that clears it out.

Tisatisane

Answer 5

The grid-auto-columns property sets a size for the columns in a grid container.

This property affects only columns with the size not set.

Refer: https://www.w3schools.com/cssref/pr_grid-auto-columns.asp

---

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout.

The values are a space separated list, where each value specifies the size of the respective column.

Refer: https://www.w3schools.com/cssref/pr_grid-template-columns.asp

Commonality

Answer 6

.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>

Jaleesa