Column

Write widths in pixels and the math has to be redone at every screen size. Set a card to 320 and it overflows on a narrow window while the right side sits empty on a wide one.

Designs and real screens part ways at the same spot. A design is usually drawn at one width, and actual users arrive at 1280 and 1920 and everything between. How many cards belong in a row at the sizes in between isn't in the file, so whoever builds it guesses. One person puts three in a row and the next puts four.

A column solves this by changing the unit. Divide the screen into a set number of slots first, then describe an element's width as a count of those slots.

A column is one vertical slot in the usable width of a screen. Twelve is the most common count on the web, because twelve divides evenly by 2, 3, 4, and 6, which means a two-up layout and a three-up layout sit on the same frame.

The important property is that a column's width isn't a fixed value. When the screen gets wider, every slot widens and the count stays the same. So a card written as three columns holds four per row at any width, with no recalculation.

Checking the notation means checking that it adds up. Body at eight columns plus a sidebar at four makes twelve and fills the row. The space between slots belongs to the gutter rather than to the column, so "three columns" doesn't include that gap.

As the screen narrows, the count itself drops — twelve to eight, and four on a phone — and breakpoints decide at which width it changes. At four columns a three-column card fits one per row, so the same cards stack.

The count, the gaps, and the outer margins settled together make a grid system. A column is one slot in that frame and doesn't get used on its own.

"Make the card three columns. That's four in a row."

Width is being decided in slots rather than pixels.

"Don't give me pixels, give me the column count."

Match the unit so nobody has to guess when the screen resizes.

"It's four columns on mobile, so this layout doesn't fit."

Narrow screens have fewer slots, so the same arrangement can't hold.

At Pagedeck, Noa set the document list card to three columns. That gives four per row on a wide screen, two at eight columns, and one on a four-column phone — three cases covered by one value instead of three separate drawings.

Theo checked one more thing: what happens when a card title wraps to two lines. The column count is unchanged and the card height isn't, so the bottom edges of four cards in a row stop lining up. Fixing that means either a fixed card height or a title clamped to one line.