---
custom_edit_url: null
---

### InfiniteGridOptions {#InfiniteGridOptions}

<div className="bulma-tags">

</div>

**Type**: TSInterface

|PROPERTY|TYPE|DESCRIPTION|
|:---:|:---:|:---:|
|horizontal|boolean|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.  (default: false) </p>|
|percentage|Array&lt;"position" \| "size"&gt; \| boolean|<p>Whether to set the css size and position of the item to %. (default: false)</p>|
|isEqualSize|boolean|<p>Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to &quot;true&quot;, the performance of layout arrangement can be improved. (default: false)</p>|
|isConstantSize|boolean|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved. (default: false)</p>|
|gap|number|<p>Gap used to create space around items. (default: 5)</p>|
|attributePrefix|string|<p>The prefix to use element's data attribute. (default: &quot;data-grid-&quot;)</p>|
|resizeDebounce|number|<p>Debounce time to set in the resize event. (default: 100)</p>|
|maxResizeDebounce|number|<p>Maximum time to debounce the resize event(0 is not set). (default: 0)</p>|
|autoResize|boolean|<p>Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. (default: true) </p>|
|useFit|boolean|<p>Whether the resize method should be called automatically after a window resize event. (default: true)</p>|
|useTransform|boolean|<p>Whether to use transform property instead of using left and top css properties. </p>|
|renderOnPropertyChange|boolean|<p>Whether to automatically render through property change. </p>|
|preserveUIOnDestroy|boolean|<p>Whether to preserve the UI of the existing container or item when destroying. </p>|
|defaultDirection|"start" \| "end"|<p>The default direction value when direction is not set in the render option. </p>|
|externalItemRenderer|ItemRenderer \| null|<p>You can set the ItemRenderer directly externally. </p>|
|externalContainerManager|ContainerManager \| null|<p>You can set the ContainerManager를 directly externally. </p>|
|container|boolean \| string \| HTMLElement|<p>The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false) </p>|
|containerTag|string|<p>If you create a container, you can set the container's tag. (default: &quot;div&quot;) </p>|
|threshold|number|<p>The size of the scrollable area for adding the next group of items. (default: 100) </p>|
|useRecycle|boolean|<p>Whether to show only the DOM of the visible area. (default: true) </p>|
|gridConstructor|GridFunction|<p>Grid class to apply Infinite function. </p>|
|renderer|Renderer \| null|<p>class that renders the DOM. </p>|

