[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseGrid](./x-components.basegrid.md) ## BaseGrid variable Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the `items` to render; and an optional one: the number `columns` the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit. **Signature:** ```typescript _default: import("vue").DefineComponent; }; }>, { gridItems: import("vue").ComputedRef; cssClasses: import("vue").ComputedRef; style: import("vue").ComputedRef>; gridEl: Ref; slots: Readonly<{ [name: string]: import("vue").Slot | undefined; }>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; }; }>> & Readonly<{}>, { animation: string | Function | Record; columns: number; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```