---

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 /> |

## Example

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 `scopedSlots`.

```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>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'

export default {
  name: 'ResultsSection',
  components: {
    BaseVariableColumnGrid,
  },
  data() {
    return {
      animation: StaggeredFadeAndSlide,
      items: [
        {
          id: 'res-1',
          modelName: 'Result',
          name: 'Product 1',
        },
        {
          id: 'res-2',
          modelName: 'Result',
          name: 'Product 2',
        },
      ],
    }
  },
  methods: {
    setColumns(columns) {
      this.$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>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'

export default {
  name: 'ResultsSection',
  components: {
    BaseVariableColumnGrid,
  },
  data() {
    return {
      animation: StaggeredFadeAndSlide,
      items: [
        {
          id: 'res-1',
          modelName: 'Result',
          name: 'Product 1',
        },
        {
          id: 'res-2',
          modelName: 'Result',
          name: 'Product 2',
        },
      ],
    }
  },
  methods: {
    setColumns(columns) {
      this.$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>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'

export default {
  name: 'ResultsSection',
  components: {
    BaseVariableColumnGrid,
  },
  data() {
    return {
      animation: StaggeredFadeAndSlide,
      items: [
        {
          id: 'res-1',
          modelName: 'Result',
          name: 'Product 1',
        },
        {
          id: 'res-2',
          modelName: 'Result',
          name: 'Product 2',
        },
      ],
    }
  },
}
</script>
```