Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Grid Column Start/End

Quiz

Tailwind CSS Grid Column Start/End is a utility class specifying the arrangement and size of columns across grid columns.

Tailwind CSS Grid Template Columns Classes

The following is the list of Tailwind CSS Grid Template Columns classes that define the arrangement and size of columns in grid layout.

Class	CSS Properties
col-auto	grid-column: auto;
col-span-1	grid-column: span 1 / span 1;
col-span-2	grid-column: span 2 / span 2;
col-span-3	grid-column: span 3 / span 3;
col-span-4	grid-column: span 4 / span 4;
col-span-5	grid-column: span 5 / span 5;
col-span-6	grid-column: span 6 / span 6;
col-span-7	grid-column: span 7 / span 7;
col-span-8	grid-column: span 8 / span 8;
col-span-9	grid-column: span 9 / span 9;
col-span-10	grid-column: span 10 / span 10;
col-span-11	grid-column: span 11 / span 11;
col-span-12	grid-column: span 12 / span 12;
col-span-full	grid-column: 1 / -1;
col-start-1	grid-column-start: 1;
col-start-2	grid-column-start: 2;
col-start-3	grid-column-start: 3;
col-start-4	grid-column-start: 4;
col-start-5	grid-column-start: 5;
col-start-6	grid-column-start: 6;
col-start-7	grid-column-start: 7;
col-start-8	grid-column-start: 8;
col-start-9	grid-column-start: 9;
col-start-10	grid-column-start: 10;
col-start-11	grid-column-start: 11;
col-start-12	grid-column-start: 12;
col-start-13	grid-column-start: 13;
col-start-auto	grid-column-start: auto;
col-end-1	grid-column-end: 1;
col-end-2	grid-column-end: 2;
col-end-3	grid-column-end: 3;
col-end-4	grid-column-end: 4;
col-end-5	grid-column-end: 5;
col-end-6	grid-column-end: 6;
col-end-7	grid-column-end: 7;
col-end-8	grid-column-end: 8;
col-end-9	grid-column-end: 9;
col-end-10	grid-column-end: 10;
col-end-11	grid-column-end: 11;
col-end-12	grid-column-end: 12;
col-end-13	grid-column-end: 13;
col-end-auto	grid-column-end: auto;

Functionality of Tailwind CSS Grid Column Start & End

col-auto: This class replaces the CSS grid-column: auto; property. This class allows an element to span automatically based on its content.
col-span-*: This class is used to specify the number of columns that should span within a grid layout. {*} representing the count of columns ranges from 1 to 12.
col-start-*: This class is used to specify the starting position of an element at the column line within a grid layout. {*} represents the position ranges from 1 to 13.
col-end-*: This class is used to specify the ending position of an element within a grid layout. {*} represents the position ranges from 1 to 13.

Tailwind CSS Grid Column Start & End Class Examples

The following examples will illustrate the Tailwind CSS Grid Column Start/End class utility.

Expanding Across Columns

The col-span-* utility specifies how an element spans across columns in a grid layout, as demonstrated below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Col Span Class Example
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 col-span-2 p-4">
            Span 2 columns
        </div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
        <div class="bg-green-100 p-4">Column 5</div>
        <div class="bg-green-500 p-4">Column 6</div>
    </div>
</body>

</html>

Aligning Element With Column start

The col-start-* utility effectively positions grid items, as shown in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Col Start Class Example
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 col-start-2 p-4">
            Col start 2 
        </div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
        <div class="bg-green-100 p-4">Column 5</div>
        <div class="bg-green-500 p-4">Column 6</div>
    </div>
</body>

</html>

Aligning Element With Column End

The col-end-* utility effectively positions grid items, as shown in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Col End Class Example
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 col-start-2 col-end-4 p-4">End at column 4</div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>

Print Page