Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Grid Auto Rows

Quiz

Tailwind CSS Grid Auto Rows is a utility class specifying the size of grid rows that are created implicitly.

Tailwind CSS Grid Auto Rows Classes

The following is the list of Tailwind CSS Grid Auto Rows classes used to set the size of implicitly created grid rows.

Class	CSS Properties
auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-auto-rows: minmax(0, 1fr);

Functionality of Tailwind CSS Grid Auto Rows Classes

auto-rows-auto:This class is used to set the height of grid rows to the height of its content.
auto-rows-min: This class used to set the height of a grid row to the minimum height needed to fit its content.
auto-rows-max: This class is used to set the height of grid rows to the maximum height needed to fit its content.
auto-rows-fr This class is used to set the rows height based on the equal fraction of the space available.

Tailwind CSS Grid Auto Rows Classes Examples

The following examples will illustrate the Tailwind CSS Grid Auto Rows class utility.

Resizing auto-created grid Rows

The auto-rows-auto utility is used to automatically resize the explicitly created grid rows, as demonstrated in the example below.

Example




    



    
        Tailwind CSS Grid Auto Rows Auto Class
    
    
        Item 1
        Item 2 with more content
        Item 3
        
            Item 4 with even more content than Item 2

Fractioning auto-created grid Rows Height

The auto-rows-fr utility is used to automatically resize the explicitly created grid rows, as demonstrated in the example below.

Example




    



    
        Tailwind CSS Grid Auto Rows Fr Class
    
    
        Item 1
        Item 2 with more content
        Item 3
        
            Item 4 with even more content than Item 2

Print Page