utilities/grid-column

8 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-span utilities for grid column spanning

The col-span-<number> utilities control how many columns an element spans. col-span-2 makes an element span 2 columns, col-span-4 spans 4 columns, and so on. The CSS generated is grid-column: span <number> / span <number>. col-span-full makes an element span from the first to the last column with grid-column: 1 / -1.

col-start utilities for grid column start position

The col-start-<number> utilities set the starting grid line for an element. col-start-2 starts at the 2nd grid line, col-start-1 starts at the 1st line, and so on. The CSS generated is grid-column-start: <number>. Negative values are supported with -col-start-<number> which generates grid-column-start: calc(<number> * -1). col-start-auto resets to auto with grid-column-start: auto.

col-end utilities for grid column end position

The col-end-<number> utilities set the ending grid line for an element. col-end-3 ends at the 3rd grid line, col-end-7 ends at the 7th grid line, and so on. The CSS generated is grid-column-end: <number>. Negative values are supported with -col-end-<number> which generates grid-column-end: calc(<number> * -1). col-end-auto resets to auto with grid-column-end: auto.

col shorthand utilities for full grid-column control

The col-<number> utilities set the grid-column property directly, generating grid-column: <number>. col-auto sets grid-column: auto. Negative values are supported with -col-<number> which generates grid-column: calc(<number> * -1).

col-span, col-start, col-end with custom properties

All column utilities support custom property values in three formats: col-span-(<custom-property>) generates grid-column: span var(<custom-property>) / span var(<custom-property>); col-start-(<custom-property>) generates grid-column-start: var(<custom-property>); col-end-(<custom-property>) generates grid-column-end: var(<custom-property>); col-(<custom-property>) generates grid-column: var(<custom-property>). These allow referencing CSS custom properties for dynamic values.

col-span, col-start, col-end with arbitrary values

All column utilities support arbitrary values in brackets: col-span-[<value>] generates grid-column: span <value> / span <value>; col-start-[<value>] generates grid-column-start: <value>; col-end-[<value>] generates grid-column-end: <value>; col-[<value>] generates grid-column: <value>. These allow any CSS value that is not predefined.

Combining col-span and col-start/col-end utilities

col-span utilities can be combined with col-start and col-end utilities on the same element to span a specific number of columns while also controlling the starting or ending position.

Responsive design support for grid column utilities

Grid column utilities support responsive design. The properties grid-column, grid-column-start, and grid-column-end can be controlled with responsive breakpoint prefixes. For example, col-span-2 on small screens and col-span-6 on larger screens.

Give your agent this brain