NATIVE LAYOUT ENGINE

Define CSS Grid layouts using native
JavaScript logic.

A recursive, zero-dependency layout engine. Write geometry using native JavaScript logic.

Get Started

npm install rowscolumns

App.jsx

import { Layout, Grid } from 'rowscolumns/react';

export default function Dashboard() {

return (

<Layout

layout={Grid.col(30, 70)}

<div> Sidebar </div>

<div> Main Content </div>

</Layout>

);

}

Built with Logic

The layout below is generated recursively.

Grid.col(40, (60).row(50, 50))

⚡

Native Speed

Runs on the browser's JS engine. No regex parsing overhead.

📐

Recursive Geometry

Nest rows inside columns infinitely. Just like math.

👻

Ghost Offsets

Use .offset() to skip grid slots mathematically.

True 2D Layouts

Define complex dashboards in a single line. Visualised below.

Grid.col(25, (50).row(30, 70), 25)

Sidebar (25%)

Header (30%)

Content Body (70%)

Widget Panel (25%)

One more example. Visualised below.

Grid.row(

    (1).col(8,8,8).offset([2]),

    (1).col(6,6,6,6).offset([1,3]),

    (1).col(6,12,6).offset([1,3])

 )

col-8

col-6

col-12

Clean & Semantic

Build complex components with flat HTML. No "Div Soup".

THE RESULT

Neon Chair

$299

Ergonomic design with luminescent mesh backing for late night coding sessions.

THE CODE

card.html

<div layout="Grid.row( auto, (auto).col(1, auto), auto, (auto).col(1, 1) )">

  
  <img src="..." />
  <h3>Neon Chair</h3>
  <span>$299</span>
  <p>Ergonomic...</p>
  <button>Buy</button>
  <button>Details</button>

</div>

Define CSS Grid layouts using native JavaScript logic.