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:
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.
<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.
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.
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.