Skip to Main Content
Concord
InfoComponentsUtilities
GitHubNPM

Wrap

Container that wraps its children using flexbox.

Layout

The Wrap component is a flex container. It spaces its children a fixed distance from each other, wrapping them onto new lines as needed.

To create one, use the class cd-wrap on a container element.

When you want elements to spread out to fill the available space and be centered within the container, use the Distribute component instead. When you don't want elements to wrap, use the Stack component instead.

1
2
3
4
5
HTMLCopied!
<div class="example cd-wrap" style="width: 16rem">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

Density

You can optionally add one of the following modifier classes to change the spacing between children (ordered from most compact to most spread out):

  • cd-spacing-none
  • cd-spacing-densest
  • cd-spacing-denser
  • cd-spacing-dense
  • cd-spacing-normal (default)
  • cd-spacing-sparse
  • cd-spacing-sparser
  • cd-spacing-sparsest

None

1
2
3

Densest

1
2
3

Denser

1
2
3

Dense

1
2
3

Normal

1
2
3

Sparse

1
2
3

Sparser

1
2
3

Sparsest

1
2
3
HTMLCopied!
<h3 class="h6">None</h3>
<div class="cd-wrap cd-spacing-none example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Densest</h3>
<div class="cd-wrap cd-spacing-densest example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Denser</h3>
<div class="cd-wrap cd-spacing-denser example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Dense</h3>
<div class="cd-wrap cd-spacing-dense example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Normal</h3>
<div class="cd-wrap example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="cd-wrap cd-spacing-sparse example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparser</h3>
<div class="cd-wrap cd-spacing-sparser example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparsest</h3>
<div class="cd-wrap cd-spacing-sparsest example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Orientation

You can optionally add one of the following modifier classes to change the axis along which the children are laid out:

  • cd-orientation-horizontal (default): elements are laid out along the x-axis
  • cd-orientation-vertical: elements are laid out along the y-axis

Horizontal

1
2
3

Vertical

1
2
3
HTMLCopied!
<h3 class="h6">Horizontal</h3>
<div class="cd-wrap cd-orientation-horizontal example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Vertical</h3>
<div class="cd-wrap cd-orientation-vertical example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>