[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) ## BaseVariableColumnGrid variable 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`. **Signature:** ```typescript _default: import("vue").DefineComponent; columns: { type: NumberConstructor; default: number; }; }>, { columnsToRender: import("vue").ComputedRef; slots: Readonly<{ [name: string]: import("vue").Slot | undefined; }>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; columns: { type: NumberConstructor; default: number; }; }>> & Readonly<{}>, { animation: string | Function | Record; columns: number; }, {}, { BaseGrid: import("vue").DefineComponent<{}, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```