Traditional Float Block Grid

This implementation is deprecated. Please use the flexbox or grid-based block grids instead. CSS declarations were removed from vanilla.css in April 2023. A simplified grid-based replacement was added at that time for backwards compatability only.

Traditional block grids use a float implementation. Standard code supports rows composed of 2 to 7 items. All "blocks" have equal widths, with equally sized gutters.

Individual items are aligned left, including items that move to the next row.

Two Up

The -up layout chosen will apply to all screens, except phones (640px or less). Then a one-up layout will appy. This is one reason that they are not as flexible as other implementations.

block-grid two-up

Four Up

block-grid four-up

Four Up, Two Orphans

block-grid four-up