Layout

A grid puts each element in order. Use it for hero elements: a cover, a post, an advert or a slide. The grid has four columns.

The grid is made of cells. The margin is one cell. A block is 2×2 cells, and the space between two columns is one cell. Each column is an odd number of cells, so every column starts on a block edge. The rows start at the top margin.

The mark is 2 cells high, in the bottom-right corner. Put a caption in CommitMono in the bottom-left corner. Its baseline is on the last row. The title has two lines in the top-left corner. The capitals of each line are two cells high, and the baseline is on a row line. One empty row separates the two lines. Use a maximum of three type sizes in one composition.

Nothing goes in the margins. The pattern uses blocks, so each block aligns with the start of a column. Each block is at least one cell away from the title, the caption and the mark. The central image is 1.1 columns wide in landscape, or 1.5 in portrait. It can sit anywhere on the path, and it is at least one block away from the title, the caption and the mark. Use Regenerate above the composition to see a new pattern and new sample text on the same grid.

Usage