new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/columns

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

columns utility classes with numeric values

The columns-<number> utility sets the number of columns within an element using the CSS columns property. Examples include columns-1, columns-2, columns-3, etc., each applying columns: <number>; to the element.

columns utility classes with width presets

Tailwind v4 provides predefined columns utilities based on container width breakpoints: columns-3xs (16rem/256px), columns-2xs (18rem/288px), columns-xs (20rem/320px), columns-sm (24rem/384px), columns-md (28rem/448px), columns-lg (32rem/512px), columns-xl (36rem/576px), columns-2xl (42rem/672px), columns-3xl (48rem/768px), columns-4xl (56rem/896px), columns-5xl (64rem/1024px), columns-6xl (72rem/1152px), columns-7xl (80rem/1280px). Each uses var(--container-<size>) CSS variables.

columns-auto utility

The columns-auto utility applies columns: auto; to an element.

columns custom property syntax

Use columns-(<custom-property>) to apply a CSS custom property value, which generates columns: var(<custom-property>);

columns arbitrary value syntax

Use columns-[<value>] to apply an arbitrary value directly, which generates columns: <value>;

Setting columns by number automatically adjusts column width

When using columns-<number> utilities like columns-3, the column width automatically adjusts to accommodate the specified number of columns.

Setting columns by width automatically adjusts column count

When using width-based columns utilities like columns-xs or columns-sm, the number of columns automatically adjusts to ensure columns don't get too narrow.

Using gap utilities with columns

The gap-<width> utilities can be used to specify the width between columns in a columned layout. Gap utilities work with the columns property.

columns utility responsive design support

The columns utility supports responsive prefixes. For example, sm:columns-3 applies columns-3 at the sm breakpoint and larger.

Give your agent this brain