CSS grid-auto-columns Property

Last Updated : 11 Jul, 2025

The grid-auto-columns CSS property specifies the size of implicitly-created grid columns using values like auto, lengths, percentages, minmax(), and more, ensuring flexible and controlled grid column sizing.

Syntax

grid-auto-columns: auto | max-content | min-content | 
 length | percentage | 
 minmax(min, max) | initial | inherit;

Property Values

Property Value	Description
auto	It is the default value. The size is determined implicitly according to the size of the container.
length	It is used to specify the size as an integer length. Negative values are not allowed.
percentage	It specifies the size as a percentage value.
max-content	It specifies the size depending on the largest item in the container.
min-content	It specifies the size depending on the smallest item in the container.
minmax(min, max)	It specifies the size in the range of [min, max]. greater than or equal to min and less than or equal to max.
initial	It sets the grid-auto-columns property to its default value.
inherit	It sets the grid-auto-columns property from its parent element.

Example 1: Using grid-auto-columns: auto

In this example we defines a grid container where items are placed into named areas using grid-template-areas. The grid-auto-columns property sets the width of columns not explicitly defined.

Output:

👁 Image

Example 2: Using grid-auto-columns: length

In this example we creates a grid container with fixed-width columns using grid-auto-columns. Each item inside has a centered text with a white background.

Output: 👁 Image

Example 3: Using grid-auto-columns: percentage

In this example we creates a grid container with columns set to 30% width of the container. Each item features centered text with a white background for a clean visual presentation.

Output:

👁 Image

Using grid-auto-columns: minmax(min, max)

In this example we defines a grid container where columns dynamically adjust between 100px and 4cm. Each item has centered text with a white background, creating a visually structured layout.

Output:

👁 Image

Example 5: Using grid-auto-columns: initial

In this example we creates a grid container with automatic column sizing based on content width. Each item has centered text with a white background, maintaining a structured layout within a green background.

Output: 👁 Image

Example 6: Using grid-auto-columns: inherit

In this example we creates a grid container with columns inheriting their width. Each item has centered text with a white background, maintaining a structured layout within a green background.

Output: 👁 Image