CSS grid-auto-columns

The grid-auto-columns property specifies the size of any auto-generated column tracks in a grid container. Auto-generated columns are those that are not explicitly defined in the grid layout but are created to fill in the gaps between defined columns.

When using grid-auto-columns, you can specify the size of the auto-generated columns in various units such as pixels, percentages, or fr units. The property can also accept multiple values to create a flexible grid layout.

Let's see how grid-auto-columns works with some examples:

Result: 

    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px;
      grid-auto-columns: 1fr;
    }
1
2
3
4
5
6

In this example, we have a grid container with two explicitly defined columns of 100 pixels each and auto-generated columns set to 1 fractional unit (fr). The auto-generated columns will fill the remaining space evenly.

Result: 

    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px;
      grid-auto-columns: 50px auto;
    }
1
2
3
4
5
6

In this second example, we have a similar grid container with two explicitly defined columns of 100 pixels each. However, the grid-auto-columns property is set to 50px auto. This means that the auto-generated columns will have a size of 50 pixels for the first column and auto size for the second column.

Experiment with different values for grid-auto-columns to see how it affects the layout of your grid containers.