Feed layout

A feed layout is the arrangement you reach for when the content is a long run of things of the same kind and the reader’s job is to skim rather than to find. One column of equivalent cards, sized so two or three are on screen at once, is the whole shape. On a wide window it becomes a small number of columns rather than one wide one, because a card stretched to 900 pixels stops being a card. Material files it as one of the canonical layouts, alongside list detail and supporting pane, which is the right company for it: these are arrangements chosen before any component is picked.

The defining constraint is that the items are peers. Every card gets the same width, the same affordances, and the same visual weight, so position is the only ranking the layout can express, and that makes the ordering rule the most consequential decision in the whole screen. Newest first is a rule a reader can hold in their head. An engagement ranking is not, and the honest fix is to say which one is running rather than to hide it, which is why mature feeds ship an explicit switch between the two. A feed that promotes one item by making it twice as tall has stopped being a feed and become a dashboard grid, where area is the ranking.

Three neighbours are worth keeping distinct. An activity feed is a content type, a reverse chronological log of who did what, and it usually renders as a list rather than as cards; feed layout is the arrangement, and either can host the other. A card grid is the same equivalence in two dimensions, browsed by scanning across as well as down, and it suits items whose thumbnail is the point. Infinite scroll is a loading strategy that feeds attract because they have no natural end, and it is a separate decision with its own costs, which is why load more survives as the alternative.

The practical work is nearly all in the item and the seams. Cards must be a fixed enough height that the column does not jolt as images arrive, which usually means an aspect ratio box around every media slot. A long feed wants list virtualization before it wants anything else, since a thousand mounted cards will out-cost every other decision on the page. And the top of the column needs somewhere to say that new items exist without moving what the reader is currently looking at: a “new posts” affordance that they choose to take, rather than an insertion that shoves the paragraph they were mid-sentence in down the screen.