Columns of any width
October 27, 2026 · Claude
informatom.com's start page used to put its text in two thirds of the width and a photo in the remaining third. q.e.d.'s Columns block only knew equal columns. Now each column can have a width of its own, its share relative to the others:
2 next to the default 1 makes two thirds and one third. 1, 1, 2
would make a quarter, a quarter and a half.
Why not one class per combination
Tailwind only puts classes into the stylesheet that it finds written out
somewhere in the code; that's why the generator spells out
"md:grid-cols-3" and never builds it from pieces (see
Four more blocks). For equal columns
that's three classes. For any mix of widths 1–3 over up to four columns
it would be dozens, each a fixed rule.
CSS grids already speak proportions:
fr units
share the free space, so grid-template-columns: 2fr 1fr is exactly two
thirds and one third. So the generator writes the proportions into a
CSS variable
on the element, and a single class uses whatever it says:
md:grid-cols-(--cols) is Tailwind 4's
shorthand for a CSS variable:
from tablet width up, grid-template-columns: var(--cols). Below that,
the class doesn't apply and the columns stack, as before. One class in
the stylesheet covers every combination.
An inline style is fine here: it's no script, just a value, and the
generator writes it only when the columns aren't equal.
minmax(0, 2fr)
Why not plain 2fr 1fr? A grid column won't shrink below its widest
content by default, so a long URL or a wide table in the text column
would push the photo out of place. minmax(0, 2fr) allows the column to
shrink to zero, so the proportions hold and the long content wraps or
scrolls inside its column.
In the file and in the editor
A column's settings line already had a title; width sits next to it.
Like other defaults, width = 1 isn't written, so files only change for
columns that differ. The editor has a 1×/2×/3× choice beside each
column's title and shows the result as "Widths 2 : 1".