Quick Guide To Grid Auto Rows In Tailwind

In this article, we will examine the Grid Auto Rows feature in Tailwind CSS. This utility is used to set the height of implicit rows in a grid container.

Grid Auto Rows allows you to set the size of rows in a grid that have not been explicitly defined.

Grid Auto Rows

By default, the size of such rows is determined by the content they contain. However, the Grid Auto Rows feature allows you to specify a fixed height for such rows or mix fixed and auto heights.

When the number of grid items exceeds the number of rows specified by the grid-template-rows property, the grid-auto-rows class applies one or more values to the implicit rows.



Grid Auto Rows Classes

ClassesOverview
auto-rows-autoThis is used for setting the height of implicit rows in a grid container to “auto”. The “auto-rows-auto” class can automatically adjust the height of additional rows when the number of grid items exceeds the grid-template-rows property.
auto-rows-minThe auto-rows-min class will set the minimum height of the implicit rows to the specified value, and if the content in the row requires more height, the row will expand to fit the content. The size is specified according to the smallest item in the container.
auto-rows-maxIn this class, a single value is specified that will be applied to implicit rows that appear when grid items exceed grid-template-rows. The maximum height of each row will be set according to the largest item in the container.
auto-rows-frThe auto-rows-fr class in Tailwind CSS is used to set the height of implicit rows in a grid container as a fraction of the free space in the grid container’s row axis. There is a range [min, max] of sizes greater than or equal to min and less than or equal to max.

Grid Auto Rows Auto

This can be useful when you have varying amounts of content in each row and want the rows to adjust accordingly.

Setting the row size to auto means that the row height will adjust based on the content inside it.

Syntax

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

In this example our focus is on implementing auto-rows-auto class in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Grid Auto Rows in Tailwind CSS </p> <p class="font-medium my-2">Using auto-rows-auto class</p> <div class="m-8 p-8 grid bg-gray-400 grid-cols-2 grid-flow-row gap-4 auto-rows-auto rounded font-medium"> <div class="p-4 bg-gray-200"> MrExamples </div> <div class="p-4 bg-gray-200"> Tailwind CSS </div> <div class="p-4 bg-gray-200"> Learning through examples </div> <div class="p-4 bg-gray-200"> A practical approach </div> </div> </body> </html>

Grid Auto Rows Min

Setting a minimum height for rows can be useful when you want to ensure that rows have a certain amount of space even if the content inside them is minimal.

For instance, you may want to create a grid with cards of varying heights, but you want to ensure that the smallest cards have a minimum height.

Syntax

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

This example demonstrates the working of auto-rows-min class in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Grid Auto Rows in Tailwind CSS </p> <p class="font-medium my-2">Using auto-rows-min class</p> <div class="m-8 p-8 grid bg-gray-400 grid-cols-2 grid-flow-row gap-4 auto-rows-min rounded font-medium"> <div class="p-4 bg-gray-200"> MrExamples </div> <div class="p-4 bg-gray-200"> Tailwind CSS </div> <div class="p-4 bg-gray-200"> Learning through examples </div> <div class="p-4 bg-gray-200"> A practical approach </div> </div> </body> </html>

Grid Auto Rows Max

Setting a maximum height for rows can be useful when you want to ensure that rows do not become too tall and create excessive white space.

For instance, you may want to create a grid with cards of varying heights, but you want to ensure that the tallest cards do not take up too much space.

Syntax

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

The following example highlights the use case of auto-rows-max class in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Grid Auto Rows in Tailwind CSS </p> <p class="font-medium my-2">Using auto-rows-max class</p> <div class="m-8 p-8 grid bg-gray-400 grid-cols-2 grid-flow-row gap-4 auto-rows-max rounded font-medium"> <div class="p-4 bg-gray-200"> MrExamples </div> <div class="p-4 bg-gray-200"> Tailwind CSS </div> <div class="p-4 bg-gray-200"> Learning through examples </div> <div class="p-4 bg-gray-200"> A practical approach </div> </div> </body> </html>
Note: if the content inside a row exceeds the maximum height set using grid-auto-rows-max, the row will overflow and create scrollbars.

To prevent this, you can set the overflow-hidden class on the grid container.


Grid Auto Rows Fr

you can use the grid-auto-rows-fr class to set the size of rows as a fraction of the available grid space.

Setting row sizes using fractions can be useful when you want to create a grid where the rows have a flexible size that adjusts based on the available space.

Syntax

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

You can also mix different row sizes using fractions and other units.

For example, you can set one row to 2fr and another to 100px to create a grid with flexible and fixed row sizes.

Additionally, you can combine the grid-auto-rows-fr class with other classes to create more complex grid layouts.

This particular examples focuses on the auto-rows-fr class in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Grid Auto Rows in Tailwind CSS </p> <p class="font-medium my-2">Using auto-rows-fr class</p> <div class="m-8 p-8 grid bg-gray-400 grid-cols-2 grid-flow-row gap-4 auto-rows-fr rounded font-medium"> <div class="p-4 bg-gray-200"> MrExamples </div> <div class="p-4 bg-gray-200"> Tailwind CSS </div> <div class="p-4 bg-gray-200"> Learning through examples </div> <div class="p-4 bg-gray-200"> A practical approach </div> </div> </body> </html>
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *