Layout Block Intelligence — 500+ Production Section Patterns

Mental model

A page is a sequence of blocks, and each block has exactly one job. When a page feels wrong it is usually not the styling — it is two blocks doing the same job, or a block doing none.

• One block, one argument. A hero makes a claim. Social proof supports it. A feature grid explains it. Pricing converts it. If you cannot name a block's argument, delete it.
• Alternate density. Dense, then open, then dense. Uniform density reads as a wall regardless of how good the individual blocks are.
• Every block needs a mobile form, and it is rarely "the same but narrower". A four-column feature grid becomes a two-by-two, not a four-high stack.
• Spacing carries the grouping. Space between blocks must exceed space within them, or the eye cannot find the seams.