Gathering detailed insights and metrics for @egjs/grid
Gathering detailed insights and metrics for @egjs/grid
Gathering detailed insights and metrics for @egjs/grid
Gathering detailed insights and metrics for @egjs/grid
@egjs/infinitegrid
A module used to arrange elements including content infinitely according to grid type. With this module, you can implement various grids composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the
@egjs/react-grid
A React component that can arrange items according to the type of grids
@egjs/react-infinitegrid
A React component that can arrange items infinitely according to the type of grids
@egjs/vue-grid
A Vue component that can arrange items according to the type of grids
A component that can arrange items according to the type of grids
npm install @egjs/grid
Typescript
Module System
Node Version
NPM Version
1.16.0 Release (2024-07-02)
Updated on Jul 02, 2024
1.14.2 Release (2023-08-03)
Updated on Aug 03, 2023
1.14.1 Release (2023-05-26)
Updated on May 26, 2023
1.13.0 Release (2023-03-13)
Updated on Mar 13, 2023
1.11.2 Release (2022-12-30)
Updated on Dec 30, 2022
1.11.0 Release (2022-07-26)
Updated on Jul 26, 2022
TypeScript (73.79%)
HTML (13.95%)
JavaScript (4.12%)
Vue (3.33%)
MDX (2.19%)
Svelte (2.09%)
CSS (0.53%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
305 Stars
116 Commits
17 Forks
10 Watchers
4 Branches
15 Contributors
Updated on Jul 13, 2025
Latest Version
1.17.1
Package Id
@egjs/grid@1.17.1
Unpacked Size
1.73 MB
Size
419.59 kB
File Count
53
NPM Version
10.8.2
Node Version
20.19.2
Published on
Jul 03, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
3
69
A component that can arrange items according to the type of grids.
![]() | ![]() | ![]() | ![]() |
---|---|---|---|
MasonryGrid | JustifiedGrid | FrameGrid | PackingGrid |
Download dist files from repo directly or install it via npm.
1$ npm install @egjs/grid
1<script src="//naver.github.io/egjs-grid/release/latest/dist/grid.min.js"></script>
1import { MasonryGrid, JustifiedGrid, FrameGrid, PackingGrid } from "@egjs/grid";
2
3
4// Grid.MasonryGrid
5const grid = new MasonryGrid(container, {
6 gap: 5,
7});
8
9grid.renderItems();
loading="lazy"
or data-grid-lazy="true"
(external lazy loading) attribute is used, Rendering of the items occurs immediately. When items are loaded, they are rendered sequentially.1<img src="..." /> 2<img src="..." /> 3<img src="..." loading="lazy" /> 4<img data-grid-lazy="true" />
data-grid-width
and data-grid-height
attributes, the size of self, child image, and video elements is automatically adjusted until loading is complete.1<div data-grid-width="100" data-grid-height="100"> 2 <img src="..." /> 3 <img src="..." /> 4 <img src="..." /> 5</div>
data-grid-skip="true"
attribute, you can omit it even if there are images in itself and child image, and video elements.1<div data-grid-skip="true"> 2 <img src="..." /> 3 <img src="..." /> 4 <img src="..." /> 5</div>
Grid calculates the size of container and children by window resizing event. However, even if the size of the window does not change, the size of the event container and children can change. Most of the first rendering issues are also like this.
In this case, I recommend ResizeObserver for you.
Provides useResizeObserver
option to detect size change of container and observeChildren
option to detect size change of children.
1import { MasonryGrid, JustifiedGrid, FrameGrid, PackingGrid } from "@egjs/grid";
2
3
4// Grid.MasonryGrid
5const grid = new MasonryGrid(container, {
6 gap: 5,
7 useResizeObserver: true,
8 observeChildren: true,
9});
10
11grid.renderItems();
If you use the isEqualSize
option, all items are considered to be the same size.
Each resize only calculates the size of one item.
Add data-grid-not-equal-size="true"
attribute if there is an exceptional item whose size needs to be calculated while using isEqualSize.
1<div class="item item1"></div> 2<div class="item item1"></div> 3<div class="item item1"></div> 4<!--item2 is a different size than item1.--> 5<div class="item item2" data-grid-not-equal-size="true"></div>
isEqualSize
assumes all items are equal. But if there are more than two size-groups, use data-grid-size-group
.
1<!--item1 has the same size.--> 2<div class="item item1" data-grid-size-group="1"></div> 3<div class="item item1" data-grid-size-group="1"></div> 4<!--item2 has the same size.--> 5<div class="item item2" data-grid-size-group="2"></div> 6<div class="item item2" data-grid-size-group="2"></div>
If all items do not have a constant size, use the isConstantSize
option. Resizing doesn't calculate the item's size.
If you want to recalculate, use .updateItems(items, { useOrgResize: true })
method or .renderItems({ useOrgResize: true })
method.
Package | Version | Description |
---|---|---|
@egjs/react-grid | React port of @egjs/grid | |
@egjs/ngx-grid | Angular port of @egjs/grid | |
@egjs/vue-grid | Vue.js port of @egjs/grid | |
@egjs/svelte-grid | Svelte port of @egjs/grid |
The following are the supported browsers.
Internet Explorer | Chrome | Firefox | Safari | iOS | Android |
---|---|---|---|---|---|
9+ | Latest | Latest | Latest | 7+ | 4+(polyfill 2.2+) |
For anyone interested to develop egjs-grid, follow the instructions below.
Clone the egjs-grid repository and install the dependency modules.
1# Clone the repository. 2$ git clone https://github.com/naver/egjs-grid.git
# Install the dependency modules.
$ npm install
npm start
Run storybook
for development.
Open http://localhost:6006 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm build
Use npm script to build Grid
1$ npm run build
Two folders will be created after complete build is completed.
To keep the same code style, we adopted ESLint to maintain our code quality. The rules are modified version based on Airbnb JavaScript Style Guide. Setup your editor for check or run below command for linting.
1$ npm run lint
Once you created a branch and done with development, you must perform a test running with npm test
command before your push the code to a remote repository.
1$ npm run test
Running npm test
command will start Mocha tests via Karma-runner.
If you find a bug, please report to us opening a new Issues on GitHub.
egjs-grid is released under the MIT license.
Copyright (c) 2021-present NAVER Corp.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 11/26 approved changesets -- score normalized to 4
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
180 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More