Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Grid Row Start / End

  • Last Updated : 08 Feb, 2021

This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative of CSS grid-row property in CSS. It is used to describes the number of properties that allow to design of grid structures and control the placement of grid items using Tailwind CSS. It can change the layout of grid items irrespective of their source order, which allows moving grid items around to cater to these varying contexts without having to modify the underlying markup.  But for fast development of front-end. The number of rows is set by the number of values given to this class.

Grid Rows Start / End:

  • row-auto
  • row-span-1
  • row-span-2
  • row-span-3
  • row-span-4
  • row-span-5
  • row-span-6
  • row-span-7
  • row-span-8
  • row-span-9
  • row-span-10
  • row-span-11
  • row-span-12
  • row-span-full
  • row-start-1
  • row-start-2
  • row-start-3
  • row-start-4
  • row-start-5
  • row-start-6
  • row-start-7
  • row-start-8
  • row-start-9
  • row-start-10
  • row-start-11
  • row-start-12
  • row-start-13
  • row-start-auto
  • row-end-1
  • row-end-2
  • row-end-3
  • row-end-4
  • row-end-5
  • row-end-6
  • row-end-7
  • row-end-8
  • row-end-9
  • row-end-10
  • row-end-11
  • row-end-12
  • row-end-13
  • row-end-auto

Spanning rows (row-span): This class will cover the span area, mentioned number after the class will hold the area of a span, we all know that there are 12 grid rows or you can say 12 grid span.

Syntax:

<element class="row-span-number"> Contents... </element>

Parameter: This class accepts a single parameter as mentioned above and described below:



number: It holds the number of spans a grid row will take.

Example:

HTML




<!DOCTYPE html>
   
<head
    <title>Tailwind row-span Class</title
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
  
    <b>Tailwind CSS row-span Class</b
  
    <div id="main" class="m-8 grid grid-row-3 grid-flow-col gap-1"
        <div class="bg-green-300 rounded-lg">1</div
        <div class="bg-green-300 rounded-lg">2</div
        <div class="bg-green-300 rounded-lg">3</div
        <div class="bg-green-500 row-span-2 rounded-lg">4</div
        <div class="bg-green-300 rounded-lg">5</div
        <div class="bg-green-500 row-span-3 rounded-lg">6</div
    </div
</body
  
</html>

Output:

Starting and ending lines (row-start|end): This class is used to make an element start or end at the nth grid line. These can also be combined with the row-span-number utilities to span a specific number of columns.

Note: We can merge this class with the above-described class(Spanning columns (row-span)), the below example will give you an idea of how to use that.

Syntax:

<element class="row-start|end-number">..</element>

Parameter: This class accept a single parameter as mentioned above and described below:

number: This parameter defines the start or the ending position of the grid row or normal row.

Example:

HTML




<!DOCTYPE html> 
  
<head
    <title>Tailwind row-start|end Class</title
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
  
    <b>Tailwind CSS row-start|end Class</b
  
    <div id="main" class="m-8 grid grid-row-4 
                          grid-flow-col gap-1 "> 
        <div class="bg-green-500 row-start-2 row-span-2 
                    rounded-lg">1</div
        <div class="bg-green-300 rounded-lg">2</div
        <div class="bg-green-300 rounded-lg">3</div
        <div class="bg-green-500 row-start-2 col-end-4 
                    rounded-lg">4</div
        <div class="bg-green-300 rounded-lg">5</div
        <div class="bg-green-300 rounded-lg">6</div
        <div class="bg-green-300 rounded-lg">7</div
        <div class="bg-green-500 row-start-2 row-span-3 
                    rounded-lg">8</div>
    </div
</body
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :