Layout cluster

The eds-l-cluster component is a layout utility for grouping elements with consistent spacing using Flexbox and the gap property.

When to use this component

Use the Cluster layout when you need to group related elements and control the spacing between them.

It helps when you want to:

• keep equal space between items, not around the edges
• allow items to wrap naturally without breaking spacing
• create horizontal or vertical groupings that stay aligned

A common use case is to present related user interface elements such as:

• button groups
• lists of tags or chips
• inline form controls (for example, input and button)
• navigation items

When not to use this component

Do not use the Cluster layout when:

• you need complex multi‑row or multi‑column structure (use Grid or Stack)
• you need full‑width alignment or vertical spacing between blocks (use Stack)
• items must stretch across the container rather than cluster together
• you need spacing control that is not based on equal gaps

How it works

Cluster layout uses Flexbox and the gap property to manage spacing between child elements. Unlike margin‑based spacing, gap adds spacing only between items.

No extra space appears before the first or after the last element. Wrapping behaves consistently and alignment options let you control vertical and horizontal behaviour.

Installation

Import the styles into your scss file:

@import '@springernature/elements/components/eds-l-cluster';

Usage

Apply the .eds-l-cluster class to the container.

<div class="eds-l-cluster">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>

Horizontal alignment

Control how items align horizontally:

• left (default), no modifier
• center, .eds-l-cluster--center
• right, .eds-l-cluster--right

<div class="eds-l-cluster eds-l-cluster--center">
    <button>Button 1</button>
    <button>Button 2</button>
</div>

Vertical alignment

Control how items align vertically:

• top, .eds-l-cluster--top
• middle, .eds-l-cluster--middle
• bottom, .eds-l-cluster--bottom
• stretch (default), no modifier

Use stretch to align form inputs and buttons to the same height, regardless of padding and font size.

<div class="eds-l-cluster eds-l-cluster--middle">
    <input type="text">
    <button>Submit</button>
</div>

Custom gap

You can override the default spacing using the CSS custom property ``--eds-l-cluster--gap`:

<label for="name">Name:</label>
<div class="eds-l-cluster" style="--eds-l-cluster--gap: 0">
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</div>

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the #ask-elements Slack channel or the #ask-elements Teams channel.