Masonry

Pass items and an itemRender function, and each card drops into the shortest of the columns, so quotes of any length pack without gaps.

Pass columns an object keyed by breakpoint to change the column count with the screen width, from one column on a phone to four on a desktop.

Render a bare img from itemRender to lay out a photo grid, with each picture cropped to its own aspect ratio.

Set gutter to space the items: one number, a [horizontal, vertical] pair, or a value per breakpoint.

Pass gutter a [horizontal, vertical] pair to space columns and rows apart on their own, like wide columns with tight rows.

Pass gutter an object keyed by breakpoint to tighten the spacing on small screens and open it up on wide ones.

Save the column onLayoutChange reports back onto each item as column, so adding or removing a task leaves the other cards where they are.

Set fresh to re-measure a card whenever its size changes, so opening an answer pushes the cards below it down instead of overlapping them.

A photo feed with crops of different heights, broken up by a sponsored card and a newsletter signup.