Tailwind CSS - Grid Row Start/End

Previous
Quiz
Next

Tailwind CSS Grid Row Start/End is a utility class specifying the arrangement and size of rows across grid rows.

Tailwind CSS Grid Template Rows Classes

The following is the list of Tailwind CSS Grid Template Rows Classes that defines the arrangement and size of rows in grid layout.

Class CSS Properties
row-auto grid-row: auto;
row-span-1 grid-row: span 1 / span 1;
row-span-2 grid-row: span 2 / span 2;
row-span-3 grid-row: span 3 / span 3;
row-span-4 grid-row: span 4 / span 4;
row-span-5 grid-row: span 5 / span 5;
row-span-6 grid-row: span 6 / span 6;
row-span-7 grid-row: span 7 / span 7;
row-span-8 grid-row: span 8 / span 8;
row-span-9 grid-row: span 9 / span 9;
row-span-10 grid-row: span 10 / span 10;
row-span-11 grid-row: span 11 / span 11;
row-span-12 grid-row: span 12 / span 12;
row-span-full grid-row: 1 / -1;
row-start-1 grid-row-start: 1;
row-start-2 grid-row-start: 2;
row-start-3 grid-row-start: 3;
row-start-4 grid-row-start: 4;
row-start-5 grid-row-start: 5;
row-start-6 grid-row-start: 6;
row-start-7 grid-row-start: 7;
row-start-8 grid-row-start: 8;
row-start-9 grid-row-start: 9;
row-start-10 grid-row-start: 10;
row-start-11 grid-row-start: 11;
row-start-12 grid-row-start: 12;
row-start-13 grid-row-start: 13;
row-start-auto grid-row-start: auto;
row-end-1 grid-row-end: 1;
row-end-2 grid-row-end: 2;
row-end-3 grid-row-end: 3;
row-end-4 grid-row-end: 4;
row-end-5 grid-row-end: 5;
row-end-6 grid-row-end: 6;
row-end-7 grid-row-end: 7;
row-end-8 grid-row-end: 8;
row-end-9 grid-row-end: 9;
row-end-10 grid-row-end: 10;
row-end-11 grid-row-end: 11;
row-end-12 grid-row-end: 12;
row-end-13 grid-row-end: 13;
row-end-auto grid-row-end: auto;

Functionality of Tailwind CSS Grid Row Start & End

  • row-auto: This class replaces the CSS grid-row: auto; property. This class allows an element to automatically span the number of rows based on its content.
  • row-span-*: This class is used to specify the number of rows that should span within a grid layout. {*} representing the count of columns ranges from 1 to 12.
  • row-start-*: This class is used to specify the starting position of an element at the row line within a grid layout. {*} representing here position ranges from 1 to 13.
  • row-end-*: This class is used to specify the ending position of an element at the row line within a grid layout. {*} representing here position ranges from 1 to 13.

Tailwind CSS Grid Row Start & End Class Examples

The following examples will illustrate the Tailwind CSS Grid row Start/End class utility.

Grid Spanning Rows

The below example illustrates the use of row-span-* class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Row Span Class Example
    </h2>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <div class="bg-red-500 row-span-2 p-4">
            Row Span 2
        </div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>

Grid Starting Lines

The below example illustrates the use of row-start-* class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Row Start Class Example
    </h2>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <div class="bg-red-500 row-start-2 p-4">
            Row Start 2
        </div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>

Grid Ending Lines

The below example illustrates the use of row-end-* class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Row End Class Example
    </h2>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <div class="bg-red-500 row-start-1 row-end-3 p-4">
            Row End 3
        </div>
        <!--Above row will start from row 1 and will end at row 3-->
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>
Print Page
Previous
Next