Skip to main content
Version: 4.5.0

Quick Start

If you don't want to use Infinite's features, use @egjs/grid.

Add the script/CSS to the page.

<!-- -->
<script src="" crossorigin="anonymous"></script>

Or, you can rather import them if you're using a bundler like webpack or rollup.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

Then, add some basic HTML layout of InfiniteGrid to your page.

<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

Then initialize InfiniteGrid instance with JavaScript after.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".wrapper", {
align: "center",
gap: 5,

ig.on("requestAppend", e => {
const nextGroupKey = (e.groupKey || 0) + 1;
const length = items.length;

`<div class="item">${length}</div>`,
`<div class="item">${length + 1}</div>`,
`<div class="item">${length + 2}</div>`,
], nextGroupKey);