How to set auto height on grid item using Tailwind ?

Our task is to create a grid container with the height of the grid items set to “auto”. Tailwind CSS includes the grid and grid-cols-number classes, which allow us to easily create a grid.

Approach:

• We will use the CDN link of Tailwind CSS and create a basic HTML page, We will create a container box sub-boxes inside the container.
• We will use the Tailwind CSS properties to style the elements and we will use the grid-cols-* class of Tailwind CSS with the container. Now the container will act like a grid box where the number of columns will depend on the grid-col-* class of Tailwind CSS.
• In the grid-cols-* class, you specify the number of columns you want to create.
• If you will use both classes (grid-rows-*,grid-cols-*) in your grid, then each grid height will be equal to the grid’s height which has maximum length content.
• We will use the grid-cols-* method and will create a grid, where each grid item will be of size auto.

We will use the Tailwind CSS CDN link to use the tailwind stylesheets in our code. Create an HTML file and copy/paste the following CDN link in the head section of the HTML file.

Tailwind CSS CDN Link:

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>

Create a grid layout using the HTML div tag and some content in each grid item. For grid-container, specify class “grid grid-cols-2” which means we are creating a grid and there will be two columns.

Syntax: 

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

Example 1: The following code demonstrates the class “grid grid-cols-2“. Each row is different in height depending on the maximum height required by the grid for that particular row.

Output: 

 

Example 2: The class “grid grid-cols-3” on the container will create the three columns and this container will act as a grid. Each element’s height will depend on the maximum content of the grid item in a single row.

Suppose a grid item in a row has a maximum of 20 <li> elements, so each grid item’s height in that row will be equal to the height of that grid item which has 20 <li> elements.  In the grid output, we have two rows and row1’s second grid item size is equal to the content in the grid item, so each grid item in row1 has a height equal to the second grid item height.

Similarly in row 2, the first grid item “Courses” height is maximum, so the next grid item’s height is also equal to that item’s height only.

Output: 

 

harishcarpenter

Follow

Improve

Article Tags :

• Tailwind CSS
• Technical Scripter
• Web Technologies
• Tailwind CSS-Questions
• Technical Scripter 2022

+1 More