Tailwind CSS Grid Column Start / End
This class accepts multiple values, and all of the properties are covered in class form. It was used as a replacement to the CSS grid-column property in CSS to express the number of properties that enable the building of grid structures and management of grid item placement using Tailwind CSS. It can change the layout of grid items regardless of their source order, allowing you to move grid items around to suit these different contexts without having to update the underlying HTML, but for quick front-end development. The number of columns is determined by how many values are assigned 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, the number after the class will hold the area of a span; we all know that there are 12 grid columns or 12 grid spans.
Syntax:
<element class="col-span-number"> Contents... </element>
Class Grid Value: As previously stated and defined below, this class accepts only one value:
number: It keeps track of how many spans a grid column will require.
Example:
<!DOCTYPE html>
<head>
<title>col-span class of Tailwind </title>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>col-span Class - Tailwind CSS </b>
<div id="main" class="m-8 grid grid-cols-3 gap-1 justify-evenly">
<div class="bg-red-300 rounded-lg h-12">1</div>
<div class="bg-red-300 rounded-lg h-12">2</div>
<div class="bg-red-300 rounded-lg h-12">3</div>
<div class="bg-red-500 col-span-2 rounded-lg h-12">4</div>
<div class="bg-red-300 rounded-lg h-12">5</div>
<div class="bg-red-500 col-span-3 rounded-lg h-12">6</div>
</div>
</body>
</html>
Output:
Starting and Ending Lines (col-start | end): This class specifies whether an element should begin or end on the nth grid line. To span, a certain number of columns, combine these with the col-span-number utilities.
This class can be combined with the above-mentioned class (Spanning columns (col-span)), the example below will show you how to do so.
Syntax:
<element class="col-start|end-number">..</element>
Parameter: This class has only one parameter, as noted before and defined below:
number: The start or end position of the grid column or normal column is defined by this parameter.
Example:
<!DOCTYPE html>
<head>
<title>col-start|end Class of Tailwind </title>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>col-start|end Class - Tailwind CSS </b>
<div id="main" class="m-8 grid grid-cols-4 gap-1 justify-evenly">
<div class="bg-red-500 col-start-2 col-span-2
rounded-lg h-12">1</div>
<div class="bg-red-300 rounded-lg h-12">2</div>
<div class="bg-red-300 rounded-lg h-12">3</div>
<div class="bg-red-500 col-start-2 col-end-4
rounded-lg h-12">4</div>
<div class="bg-red-300 rounded-lg h-12">5</div>
<div class="bg-red-300 rounded-lg h-12">6</div>
<div class="bg-red-300 rounded-lg h-12">7</div>
<div class="bg-red-500 col-start-2 col-span-3
rounded-lg h-12">8</div>
</div>
</body>
</html>
Output:
