Block Grids

To define cell widths within a direction-level, instead of the individual cell level, add the class .[size]-up-[n] to a grid-x, where [n] is the number of cells to display per direction, and [size] is the breakpoint at which to apply the effect (small, medium, large, xlarge).  By default, items will display stacked (full width) until the [size] is reach.

You can change the [n] value for different breakpoints, for example if you want a display to show cards stacked at mobile, 2-wide at medium, 3 wide at large, and 4 wide at xlarge, you would add medium-up-2 large-up-3 xlarge-up-4.

For most grids, you'll also want to include grid-padding-x grid-padding-y to add matching horizontal and vertical spacing between cells. 

Copy Callout Cards will only match in height if you check their equalize heights options.

Sample 1

Resize the window to see how the cells move between rows. This sample uses  medium-up-2 large-up-3 xlarge-up-4.

Sample 2

Resize the window to see how the cells move between rows. This sample uses  medium-up-2 xlarge-up-3.

Sample 3

You can also use different components and they will match in height.  This example uses a Copy Callout Card (using white background, small-to-large padding and no bottom margin) next to a full width image. The Block Grid uses .medium-up-2 to place these side by side at the medium breakpoint and above and .align-middle to vertically center the content. 

Learn more about Vertical Centering.