Layout: Cluster

The cluster suits any groups of elements that differ in length and are liable to wrap. Examples include groups of buttons at the end of forms, lists of tags, etc.

The following example illustrates how the cluster layout works:

• A center layout is contained within a box layout (without a border or padding), purely to help with this example.
• The cluster layout is contained within the center layout.
• The cluster layout needs an inner container - in this example it's provided by a ul.
• The cluster items - li in this example - sit within the inner container. Each item has a margin on all sides. Their parent - the inner container - has a negative margin of the same size as the cluster items. This creates the even gaps between cluster items. The cluster layout uses overflow: hidden; to tidy up the edges.