utilities/grid

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

grid-flow-row-dense example usage

The grid-flow-row-dense utility can be applied to a grid container with grid-cols-3 and grid-rows-3 to control how child items are auto-placed. When a child has col-span-2, the dense packing algorithm allows smaller items to fill gaps that would otherwise be left empty.

grid-auto-flow utilities support responsive design

Grid auto-flow utilities in Tailwind respond to breakpoints and support responsive design, allowing different grid-auto-flow values to be applied at different screen sizes.

grid-auto-flow utility classes in Tailwind v4

Tailwind provides five utility classes for controlling grid auto-placement: grid-flow-row (grid-auto-flow: row), grid-flow-col (grid-auto-flow: column), grid-flow-dense (grid-auto-flow: dense), grid-flow-row-dense (grid-auto-flow: row dense), and grid-flow-col-dense (grid-auto-flow: column dense).

auto-cols-fr utility

The auto-cols-fr utility applies grid-auto-columns: minmax(0, 1fr); to control the size of implicitly-created grid columns.

auto-cols numeric utility

The auto-cols-<number> utility applies grid-auto-columns: calc(var(--spacing) * <number>); to control the size of implicitly-created grid columns based on the spacing scale.

auto-cols custom property utility

The auto-cols-(<custom-property>) utility applies grid-auto-columns: var(<custom-property>); to control the size of implicitly-created grid columns using a custom CSS property.

auto-cols arbitrary value utility

The auto-cols-[<value>] utility applies grid-auto-columns: <value>; to control the size of implicitly-created grid columns using arbitrary CSS values.

grid-auto-columns responsive design support

The grid-auto-columns utilities support responsive design through Tailwind CSS responsive breakpoints.

auto-cols-auto utility

The auto-cols-auto utility applies grid-auto-columns: auto; to control the size of implicitly-created grid columns.

auto-cols-min utility

The auto-cols-min utility applies grid-auto-columns: min-content; to control the size of implicitly-created grid columns.

auto-cols-max utility

The auto-cols-max utility applies grid-auto-columns: max-content; to control the size of implicitly-created grid columns.

grid-cols-<number> utility syntax and CSS

The grid-cols-<number> utilities create grids with equally sized columns. The syntax is grid-cols-<number> where <number> is the column count, and it generates the CSS grid-template-columns: repeat(<number>, minmax(0, 1fr));

grid-cols-none utility

The grid-cols-none utility sets grid-template-columns: none; and is used to remove grid column definitions.

grid-cols-subgrid utility

The grid-cols-subgrid utility sets grid-template-columns: subgrid; and allows a grid item to adopt the column tracks defined by its parent grid.

grid-cols supports responsive design

The grid-template-columns utilities support responsive design with prefix variants for different breakpoints, allowing different column layouts at different screen sizes.

grid-cols-subgrid utility added in v3.4

Tailwind CSS v3.4 added subgrid support via grid-cols-subgrid. Subgrid lets a grid element inherit the grid columns or rows from its parent, making it possible to place child elements in the parent grid. Useful for layouts like dropdown menus where items need text alignment.

Extended grid-rows scale from 6 to 12 in v3.4

Tailwind CSS v3.4 increased the number of built-in grid rows from 6 to 12. Classes like grid-rows-9 are now available.

Give your agent this brain