Tailwind CSS Grid Column Start / End - GeeksforGeeks

23 Mar, 2022
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, mentioned 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:
kalrap615
Tailwind CSS
Tailwind-Grid
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?