Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Grid Column 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-column property in CSS it was 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 columns is set by the number of values given to this class. 

Grid Column Start / End:

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

Spanning columns (col-span): This class will cover the span area, mnetioned number after the class will holds the area of a span, we all know that there are 12 grid column or you can say 12 grid span.

Syntax:

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

Class Grid Value: This class accepts a single value as mentioned above and described below:



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

Example:

HTML




<!DOCTYPE html> 
  
<head
    <title>Tailwind col-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 col-span Class</b
  
    <div id="main" class="m-8 grid grid-cols-3 gap-1 justify-evenly"
        <div class="bg-green-300 rounded-lg h-12">1</div
        <div class="bg-green-300 rounded-lg h-12">2</div
        <div class="bg-green-300 rounded-lg h-12">3</div
        <div class="bg-green-500 col-span-2 rounded-lg h-12">4</div
        <div class="bg-green-300 rounded-lg h-12">5</div
        <div class="bg-green-500 col-span-3 rounded-lg h-12">6</div
    </div
</body
  
</html>

Output:

Starting and ending lines (col-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 col-span-number utilities to span a specific number of columns.

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

Syntax:

<element class="col-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 column or normal column.

Example:

HTML




<!DOCTYPE html>
   
<head
    <title>Tailwind col-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 col-start|end Class</b
  
    <div id="main" class="m-8 grid grid-cols-4 gap-1 justify-evenly"
        <div class="bg-green-500 col-start-2 col-span-2 
                    rounded-lg h-12">1</div
        <div class="bg-green-300 rounded-lg h-12">2</div
        <div class="bg-green-300 rounded-lg h-12">3</div
        <div class="bg-green-500 col-start-2 col-end-4 
                    rounded-lg h-12">4</div
        <div class="bg-green-300 rounded-lg h-12">5</div
        <div class="bg-green-300 rounded-lg h-12">6</div
        <div class="bg-green-300 rounded-lg h-12">7</div
        <div class="bg-green-500 col-start-2 col-span-3 
                    rounded-lg h-12">8</div>
    </div
</body
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :