Layout Plugin

GS FlexoGrid

Flexbox-based masonry layout engine with auto-arranging grids, variable-height columns, and dynamic reflow animations.

Latest: v0.0.27

Downloads last month: 66

Visit Demo Website

Install Package

npm i @get-set/gs-flexogrid

or via CDN

<link rel="stylesheet" href="https://cdn.get-set.it/gs-flexogrid/latest/gs-flexogrid.min.css">
<script src="https://cdn.get-set.it/gs-flexogrid/latest/gs-flexogrid.min.js"></script>

Interactive Playground

Live Sandbox

FlexoGrid.jsx

import FlexoGrid from '@get-set/gs-flexogrid';

export default function App() {
  return (
    <FlexoGrid
      layout="masonry"
      gap="20px"
    >
      <div className="card">Card A</div>
      <div className="card">Card B</div>
      <div className="card">Card C</div>
      <div className="card">Card D</div>
    </FlexoGrid>
  );
}

import FlexoGrid from '@get-set/gs-flexogrid';

export default function App() {
  return (
    <FlexoGrid
      layout="masonry"
      gap="20px"
    >
      <div className="card">Card A</div>
      <div className="card">Card B</div>
      <div className="card">Card C</div>
      <div className="card">Card D</div>
    </FlexoGrid>
  );
}

Live Preview

Options

Configuration Values

Layout Algorithm

Columns

Row Height (px)

Gap

Relayout Easing

Relayout Duration (ms)

Entrance Reveal

Entrance Stagger (ms)

Theme

Item Radius

Skeleton Tiles

Reference Key

Feature Flags

Hover LiftItem ShadowSkeleton Loading

API Specifications

Option	Type	Default	Description
count	number	3	Masonry target layout column count.
gap	string	'20rem'	Grid spacing gap margin.
filter	'all' \| 'even' \| 'odd'	'all'	Filtering selector parameter.
sort	'default' \| 'asc' \| 'desc'	'default'	Height sorting parameter.

Technical Features

Masonry Reflow

Calculates child heights and arranges them with zero layout shift.

Dynamic Columns

Auto-adapts column counts dynamically on resize.

Image Reflow Sync

Re-calculates grid coordinate matrix once all images complete loading.

SCSS Injector

Translates custom SCSS constraints to head styles programmatically.

import FlexoGrid from '@get-set/gs-flexogrid'; export default function App() { return ( <FlexoGrid layout="masonry" gap="20px" > <div className="card">Card A</div> <div className="card">Card B</div> <div className="card">Card C</div> <div className="card">Card D</div> </FlexoGrid> ); }

Option

Type

Default

Description

count

number

Masonry target layout column count.

gap

string

'20rem'

Grid spacing gap margin.

filter

'all' | 'even' | 'odd'

'all'

Filtering selector parameter.

sort

'default' | 'asc' | 'desc'

'default'

Height sorting parameter.