---

title: BaseVariableColumnGrid

---

# BaseVariableColumnGrid

The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
selected number of columns to the grid. It also allows to customize the grid items using the
available `scopedSlots`.

## Props

| Name                   | Description                                                                                                                             | Type                       | Default           |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code> | Animation component that will be used to animate the grid.                                                                              | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>items</code>     | The list of items to be rendered.                                                                                                       | <code>ListItem[]</code>    | <code></code>     |
| <code>columns</code>   | The columns to render by default in the grid. This property is used when the user has not<br />selected any value in the column picker. | <code>number</code>        | <code>0</code>    |

## Slots

| Name              | Description                                                                        | Bindings<br />(name - type - description)              |
| ----------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------ |
| <code>name</code> | Customized item rendering. The slot name can either be default or the item's model | **item** <code>GridItem</code> - Item to render.<br /> |

## Examples

The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the
`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows
you to customize the grid items using the available slots.

### Basic example

```vue
<template>
  <section class="results">
    <button @click="setColumns(4)" class="column-picker-selector">
      <span class="column-picker-selector__text">4 columns</span>
    </button>
    <BaseVariableColumnGrid :animation="animation" :items="items">
      <template #default="{ item }">
        <span data-test="default-slot">{{ item.id }}</span>
      </template>
      <template #result="{ item }">
        <span data-test="result-slot">{{ "Result " + item.id }}</span>
      </template>
    </BaseVariableColumnGrid>
  </section>
</template>

<script setup>
import { ref } from "vue";
import {
  BaseVariableColumnGrid,
  StaggeredFadeAndSlide,
} from "@empathyco/x-components";
import { use$x } from "../../composables";

const x = use$x();
const animation = StaggeredFadeAndSlide;
const items = [
  { id: "res-1", modelName: "Result", name: "Product 1" },
  { id: "res-2", modelName: "Result", name: "Product 2" },
];
function setColumns(columns) {
  x.emit("UserClickedColumnPicker", columns);
}
</script>
```

### Playing with props

Configuring the default columns to be rendered. These columns will be the default value until the
`ColumnsNumberProvided` is emitted and changes the value.

```vue
<template>
  <section class="results">
    <button @click="setColumns(5)" class="column-picker-selector">
      <span class="column-picker-selector__text">5 columns</span>
    </button>
    <BaseVariableColumnGrid :animation="animation" :items="items" :columns="3">
      <template #default="{ item }">
        <span data-test="default-slot">{{ item.id }}</span>
      </template>
      <template #result="{ item }">
        <span data-test="result-slot">{{ "Result " + item.id }}</span>
      </template>
    </BaseVariableColumnGrid>
  </section>
</template>

<script setup>
import { ref } from "vue";
import {
  BaseVariableColumnGrid,
  StaggeredFadeAndSlide,
} from "@empathyco/x-components";
import { use$x } from "@empathyco/x-components";

const x = use$x();
const animation = StaggeredFadeAndSlide;
const items = [
  { id: "res-1", modelName: "Result", name: "Product 1" },
  { id: "res-2", modelName: "Result", name: "Product 2" },
];
function setColumns(columns) {
  x.emit("UserClickedColumnPicker", columns);
}
</script>
```

### Customizing the items width

The `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid
items.

```vue
<template>
  <BaseVariableColumnGrid
    :animation="animation"
    :items="items"
    style="--x-size-min-width-grid-item: 150px"
  >
    <template #default="{ item }">
      {{ `Default slot content: ${item.id}` }}
    </template>
  </BaseVariableColumnGrid>
</template>

<script setup>
import {
  BaseVariableColumnGrid,
  StaggeredFadeAndSlide,
} from "@empathyco/x-components";
import { ref } from "vue";
const animation = StaggeredFadeAndSlide;
const items = [
  { id: "res-1", modelName: "Result", name: "Product 1" },
  { id: "res-2", modelName: "Result", name: "Product 2" },
];
</script>
```