How to make grid items auto height using tailwind CSS ?

You can easily make CSS grid items to auto height using grid-template-columns property in Tailwind CSS. 

Tailwind uses grid-col and grid-row property which is an alternative to the grid-template-columns property in CSS. The grid-template-columns property in CSS is used to set the number of columns and size of the columns of the grid.

This class accepts more than one value in tailwind CSS all the properties are covered as in class form. The number of columns is set by the number of values given to this class. 

Grid Template Columns:

• grid-cols-1: Each row concedes only one column.
• grid-cols-6:  Each row concedes six columns.
• grid-cols-12: Each row concedes twelve columns.

Syntax:

<element class="grid grid-cols-number"> Contents... </element>

Example 1:

Output:

Note: From the above output, you can observe that each row has a different height depending on max-height required by a grid of a particular row.

Example 2:

Output: