---

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