Grid Layout

Layer 0  ·  Column 0  ·  Front-Left

Grid Layout

Panels are placed in a rectangular XZ grid. Columns spread along the X axis; depth layers spread along the Z axis. An optional Y offset creates a staircase effect where deeper layers sit lower on screen.

<div class="foldpage"
     data-foldpage-view-layout="grid"
     data-foldpage-view-layout-count="3"
     data-foldpage-view-layout-spacing="1.1"
     data-foldpage-view-layout-offset-y="60">

  <header data-foldpage-view="0">Center</header>
  <section data-foldpage-view>...</section>
  
</div>

Layer 0  ·  Column 1  ·  Front-Center

Auto Count

When count is omitted, the grid auto-computes ceil(sqrt(panelCount)) columns for a roughly square shape.

/* Auto-count examples */
/* 4 panels → count=2 (2×2)  */
/* 6 panels → count=3 (3×2)  */
/* 9 panels → count=3 (3×3)  */
/* 12 panels → count=4 (4×3) */

/* This demo: 9 panels, count=3 explicit */
data-foldpage-view-layout-count="3"

Layer 0  ·  Column 2  ·  Front-Right

Spacing

spacing is a uniform multiplier for both column and layer gaps. Use spacing-x and spacing-z to override each axis independently.

/* Uniform spacing */
data-foldpage-view-layout-spacing="1.5"

/* Per-axis spacing */
data-foldpage-view-layout-spacing-x="1.8"  /* wide columns */
data-foldpage-view-layout-spacing-z="0.7"  /* shallow depth */

/* Live update */
Fold.set({ viewLayout: { spacingX: 2.0 } });

Layer 1  ·  Column 0  ·  Mid-Left

Staircase

offset-y shifts each successive depth layer down the screen. Positive values push deeper layers lower — matching the natural perspective of a staircase receding into the distance.

/* This demo: each layer 60px lower */
data-foldpage-view-layout-offset-y="60"

/* offset-x: X shift per depth layer */
data-foldpage-view-layout-offset-x="40"

/* offset-z: Z stagger per column within a row */
data-foldpage-view-layout-offset-z="50"

Layer 1  ·  Column 1  ·  Mid-Center

Direction

direction controls the fill axis and which end of the Z axis starts first.

/* Row-major (default) — fills X first, front to back */
data-foldpage-view-layout-direction="row"

/* Row-major, back to front */
data-foldpage-view-layout-direction="row-reverse"

/* Layer-major — fills Z first, front to back */
data-foldpage-view-layout-direction="layer"

/* Layer-major, back to front */
data-foldpage-view-layout-direction="layer-reverse"

Layer 1  ·  Column 2  ·  Mid-Right

Head View

By default (head="true") the data-foldpage-view="0" element is the head view — it stays in normal document flow at Z=0 and panels start one layer back.

/* head=true (default): head at Z=0, panels start at Z=−layerGap */
data-foldpage-view-layout-head="true"

/* head=false: all views are grid panels including view="0" */
data-foldpage-view-layout-head="false"

Layer 2  ·  Column 0  ·  Back-Left

Alignment

align controls horizontal alignment of partial last rows and the overall grid origin.

/* center (default): grid centered on X=0 */
data-foldpage-view-layout-align="center"

/* start: grid starts at X=0, extends right */
data-foldpage-view-layout-align="start"

Layer 2  ·  Column 1  ·  Back-Center

View Ordering

data-foldpage-view="<n>" sets explicit slot order. Panels with numeric values are assigned first (sorted by number); unnumbered panels follow in DOM order.

<section data-foldpage-view="2">Third</section>
<section data-foldpage-view="1">Second</section>
<section data-foldpage-view>Last (DOM order)</section>

Layer 2  ·  Column 2  ·  Back-Right

JS API

All grid options are also available via Fold.init() and can be updated live with Fold.set().

Fold.init({
  viewLayout: {
    type:           'grid',
    count:          3,
    spacing:        1.1,
    spacingX:       1.4,
    spacingZ:       0.9,
    offsetY:        60,
    align:          'center',
    direction:      'row',
    scrollDistance: 1000,
  }
});

/* Live update — patches transforms in place */
Fold.set({ viewLayout: { spacingZ: 1.5 } });

See Ring Inward, Ring Outward, Ring Arc, or all demos.