Quick Guide To Grid Column Start & End
Let’s delve into the concept of Grid column start and end with examples in Tailwind Css through this article.
One critical aspect of the grid system is the ability to control the position and size of grid items within a grid container.
This is achieved using grid column start/end which allows you to specify where a grid item starts and ends in terms of grid columns.
It is an alternative to CSS grid-columns property.
Note: if the {start} and {end} values are the same, you can use the shorthand class col-{breakpoint}-{start} to define the starting position of the grid item.
Similarly, if the {end} value is not specified, the item will occupy all the remaining columns to the right of the starting position.
Table Of Content-
Grid Column Start & End Classes
| Classes | Overview |
| col-auto | This utility class can be used to set the width of a grid column to be based on the content inside it. |
| col-span-1 | In a grid container, this sets the number of columns an element spans to 1. |
| col-span-2 | An element occupies two columns within a grid container using this class. |
| col-span-3 | Three columns are occupied by a grid item using this class. |
| col-span-4 | The grid item using this class covers four columns. |
| col-span-5 | The grid item stretches to occupy five column space. |
| col-span-6 | Six column space is utilized by the grid item. |
| col-span-7 | Using this class, the grid item covers the space of seven columns. |
| col-span-8 | An element in a grid container spreads on eight column space using this class. |
| col-span-9 | Nine columns are occupied by the grid item using this class. |
| col-span-10 | This class is used to make a grid item span to ten columns. |
| col-span-11 | In this case, the width of a grid column spans 11 grid tracks. |
| col-span-12 | Twelve columns are occupied by an element in a grid container. |
| col-span-full | This class is used to specify that an element should span across all columns in a grid container. |
| col-start-1 | This class is used to start a grid item in the first column of the grid. |
| col-start-2 | Starts a grid item from the second column in the grid. |
| col-start-3 | Using this class, the grid item begins from the third column. |
| col-start-4 | The grid item starts from the fourth column. |
| col-start-5 | An element in a grid container using this class, starts from the fifth column of the grid. |
| col-start-6 | In this case, the grid item starts from the sixth column. |
| col-start-7 | This class is used to start a grid item from the seventh column. |
| col-start-8 | Using this class, the grid item starts from the eighth column. |
| col-start-9 | The grid item using this class starts from the ninth column of the grid. |
| col-start-10 | This class is used to set the starting column of an element to the 10th grid column in a grid container. |
| col-start-11 | The starting column position for an element within a grid container is specified as the 11th column line. |
| col-start-12 | In this case, the starting position of an element within a grid is defined as the 12th vertical grid line. |
| col-start-13 | Using this class, the grid item starting position is the 13th vertical grid line. |
| col-start-auto | This class is used when you want the grid item to start at the first available column in the grid. |
| col-end-1 | The end position of an element in a grid is specified as the first column line. |
| col-end-2 | A grid element’s second column line specifies its end position. |
| col-end-3 | An element’s end position is specified by the third column line in a grid. |
| col-end-4 | Fourth column lines indicate the end position of an element in a grid. |
| col-end-5 | An element in a grid is specified as having the fifth column line as its end position. |
| col-end-6 | This class sets the ending column of an element to be the 6th column in a grid. |
| col-end-7 | The ending column of an element in a grid is set to the 7th column using this class. |
| col-end-8 | In a grid, this class sets the ending column of the grid item as the 8th column. |
| col-end-9 | The closing column of a grid item will be set to the 9th column when using this class. |
| col-end-10 | It sets an item’s ending column as the 10th column in a grid. |
| col-end-11 | Using this class, the 11th column of a grid item is set as the ending column. |
| col-end-12 | In this case, the ending position of an element within a grid is defined as the 12th vertical grid line. |
| col-end-13 | When using this class, the grid item ending position is the 13th vertical grid line. |
| col-end-auto | Using this class, the end position of an element is defined as the last column of the grid container. |
Spanning Columns (col-span)
This utility sets the number of columns an element should occupy in a grid container.
The number represents the amount of columns a grid column will occupy.
Syntax
<element class="col-span-number"> </element>
In the following example the col-span utility is being demonstrated:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using col-span class in Tailwind</p>
<p class="font-medium text-gray-500 text-sm">Total 5 rows in this grid</p>
<div id="main" class="m-8 grid grid-cols-5 gap-1 justify-evenly font-medium">
<div class="bg-gray-300 col-span-1 rounded-lg h-12 ">col-span-1</div>
<div class="bg-gray-300 col-span-4 rounded-lg h-12">col-span-4</div>
<div class="bg-gray-300 col-span-1 rounded-lg h-12">col-span-1</div>
<div class="bg-gray-400 col-span-2 rounded-lg h-12">col-span-2</div>
<div class="bg-gray-300 col-span-3 rounded-lg h-12">col-span-3</div>
<div class="bg-gray-400 col-span-5 rounded-lg h-12">col-span-5</div>
</div>
</body>
</html>
Starting and ending lines (col-start|end)
This utility allows you to specify where a grid item starts and ends in terms of grid columns. The col-span utility can be used as well.
Syntax
<element class="col-start-number"> </element>
or
<element class="col-end-number"> </element>
This example makes use of the col-start, col-end and col-span classes implemented together:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using col-span class in Tailwind</p>
<p class="font-medium text-gray-500 text-sm">Total 5 rows in this grid</p>
<div id="main" class="m-8 grid grid-cols-5 gap-1 justify-evenly font-medium">
<div class="bg-gray-300 col-start-1 col-span-1 col-end-3 rounded-lg h-12 ">col-start-1 col-span-1</div>
<div class="bg-gray-300 col-start-3 col-end-5 rounded-lg h-12">col-start-3 col-end-5</div>
<div class="bg-gray-300 col-start-2 col-span-2 col-end-4 rounded-lg h-12">col-start-2 col-span-2 col-end-4</div>
<div class="bg-gray-300 col-start-4 col-end-5 rounded-lg h-12">col-start-4 col-end-5</div>
<div class="bg-gray-300 col-start-1 col-span-3 rounded-lg h-12">col-start-1 col-span-3</div>
<div class="bg-gray-300 col-start-2 col-span-4 rounded-lg h-12">col-start-2 col-span-4</div>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
