# grid — Examples

## Basic usage

```html
<grid-ui columns="3" gap="4">
  <card-ui>…</card-ui>
  <card-ui>…</card-ui>
  <card-ui>…</card-ui>
</grid-ui>
```

## Asymmetric layouts via [span]

```html
<!-- 2:1 split -->
<grid-ui columns="3" gap="4">
  <card-ui span="2">Main panel</card-ui>
  <card-ui>Side panel</card-ui>
</grid-ui>
```
