# XWUIWrap

Layout with gap and auto-wrap (Chakra Wrap equivalent).

## Basic Usage

A row of tag-like string children that automatically wraps onto new lines with an 8px gap.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A row of tag-like string children that automatically wraps onto new lines with an 8px gap.
```

## Centered Tags

Use `justify` and `align` to position wrapped items. Here the string children are centered with a wider 16px `gap`.

```example
file: examples/CenteredTags.ts
html: examples/CenteredTags.html
title: Centered Tags
description: String children centered horizontally with justify "center" and a wider 16px gap.
```

## Spaced Element Cards

Children may also be real HTMLElements. These colored boxes are spread edge-to-edge with `justify: "between"`, and `rowGap` sets a larger vertical gap than the horizontal `gap` once they wrap.

```example
file: examples/SpacedCards.ts
html: examples/SpacedCards.html
title: Spaced Element Cards
description: HTMLElement children distributed edge-to-edge with justify "between" and a larger row gap than column gap.
```

```api
```