col-start with custom property
The col-start-(<custom-property>) syntax allows using a CSS custom property for the starting grid line. It produces the CSS: grid-column-start: var(<custom-property>);
Tailwind CSS · Utilities reference · all subjects
grid-column
20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
col-start with arbitrary value
The col-start-[<value>] syntax allows using an arbitrary value for the starting grid line. It produces the CSS: grid-column-start: <value>;
col-end-<number> utility class
The col-end-<number> utility class sets the ending grid line. It produces the CSS: grid-column-end: <number>;
col-end-auto utility class
The col-end-auto utility class sets the ending grid line to auto. It produces the CSS: grid-column-end: auto;
col-end with custom property
The col-end-(<custom-property>) syntax allows using a CSS custom property for the ending grid line. It produces the CSS: grid-column-end: var(<custom-property>);
col-end with arbitrary value
The col-end-[<value>] syntax allows using an arbitrary value for the ending grid line. It produces the CSS: grid-column-end: <value>;
col-auto utility class
The col-auto utility class sets the grid-column property to auto. It produces the CSS: grid-column: auto;
col-<number> utility class
The col-<number> utility class sets the grid-column to a specific number. It produces the CSS: grid-column: <number>;
col negative number
The -col-<number> syntax applies a negative value to the grid-column. It produces the CSS: grid-column: calc(<number> * -1);
col with custom property
The col-(<custom-property>) syntax allows using a CSS custom property for the grid-column. It produces the CSS: grid-column: var(<custom-property>);
col-span-<number> utility class
The col-span-<number> utility class makes an element span n columns. It produces the CSS: grid-column: span <number> / span <number>;
col-span-full utility class
The col-span-full utility class makes an element span all columns. It produces the CSS: grid-column: 1 / -1;
col-start-<number> utility class
The col-start-<number> utility class sets the starting grid line. It produces the CSS: grid-column-start: <number>;
col-start negative number
The -col-start-<number> syntax applies a negative value to the starting grid line. It produces the CSS: grid-column-start: calc(<number> * -1);
col-start-auto utility class
The col-start-auto utility class sets the starting grid line to auto. It produces the CSS: grid-column-start: auto;
col with arbitrary value
The col-[<value>] syntax allows using an arbitrary value for the grid-column. It produces the CSS: grid-column: <value>;
Grid column utilities support responsive design
The grid-column, grid-column-start, and grid-column-end properties support responsive design variants. Use responsive prefixes like md:col-span-2 to apply different column spanning and positioning rules at different breakpoints.
col-span-2 example
Example showing col-span-2 applied to an element in a 3-column grid: ```html <div class="grid grid-cols-3 gap-4"> <div class="...">01</div> <div class="...">02</div> <div class="...">03</div> <div class="col-span-2 ...">04</div> <div class="...">05</div> <div class="...">06</div> <div class="col-span-2 ...">07</div> </div> ```
col-start and col-end example
Example showing col-start-<number> and col-end-<number> utilities in a 6-column grid: ```html <div class="grid grid-cols-6 gap-4"> <div class="col-span-4 col-start-2 ...">01</div> <div class="col-start-1 col-end-3 ...">02</div> <div class="col-span-2 col-end-7 ...">03</div> <div class="col-start-1 col-end-7 ...">04</div> </div> ```
col-span and col-start/col-end can be combined
The col-span-<number> utilities can be combined with col-start-<number> and col-end-<number> utilities to span a specific number of columns while also positioning elements.