Tailwind CSS Grid Auto Columns

This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to CSS grid-auto-columns property. This class is used to specify the size for the columns of implicitly generated grid containers. This class is used for utilities to control the size of implicitly-created grid columns.

Grid Auto columns classes:

• auto-cols-auto 
• auto-cols-min 
• auto-cols-max 
• auto-cols-fr 

auto-cols-auto: It is the default value. The size is determined implicitly according to the size of the container.

Syntax:

<element class="auto-cols-auto">..</element>

Example:

Output:

👁 Image

auto-cols-min: It specifies the size depending on the smallest item in the container.

Syntax:

<element class="auto-cols-min">..</element>

Example:

Output:

👁 Image

auto-cols-max: It specifies the size depending on the largest item in the container.

Syntax:

<element class="auto-cols-max">..</element>

Example:

Output:

👁 Image

auto-cols-fr: It specifies the size in the range of [min, max] greater than or equal to min and less than or equal to max.

Syntax:

<element class="auto-cols-fr">..</element>

Example:

Output:

👁 Image