Grid Vertical

Layer 1  ·  Z = +700 px  ·  Y = −180 px

Negative Spacing-Z

A negative spacing-z flips the Z direction. Instead of pushing panels away from the camera, each successive layer comes toward the viewer. Combined with a negative offset-y, panels rise as they approach — giving the feeling of ascending through space.

<div class="foldpage"
     data-foldpage-view-layout="grid"
     data-foldpage-view-layout-count="1"
     data-foldpage-view-layout-spacing-z="-1.0"
     data-foldpage-view-layout-offset-y="-180">
  ...
</div>

Layer 2  ·  Z = +1400 px  ·  Y = −360 px

Manual Equivalent

The manual views-vertical.html demo uses rotateX + translateY + positive translateZ to fan panels above and below the center. This grid approximation captures the forward-Z and vertical spread using only layout attributes — no per-panel CSS transforms.

/* Manual (views-vertical.html) */
.sky-1  { transform: rotateX(-22deg)  translateY(-680px)  translateZ(260px);  }
.sky-2  { transform: rotateX(-38deg)  translateY(-1250px) translateZ(420px);  }

/* Grid approximation — no rotateX, unidirectional */
spacing-z="-1.0"  /* → Z = +700, +1400, ... */
offset-y="-180"  /* → Y = -180, -360, ... */

Layer 3  ·  Z = +2100 px  ·  Y = −540 px

Descending Variant

Use a positive offset-y with negative spacing-z to make panels descend as they approach — the inverse of this demo.

/* Panels approach and descend */
data-foldpage-view-layout-spacing-z="-1.0"
data-foldpage-view-layout-offset-y="200"

/* Flat approach — no vertical offset */
data-foldpage-view-layout-spacing-z="-1.5"
data-foldpage-view-layout-offset-y="0"

/* Live update */
Fold.set({ viewLayout: { spacingZ: -0.8, offsetY: -120 } });

Layer 4  ·  Z = +2800 px  ·  Y = −720 px

Combining Directions

For the bidirectional fan from views-vertical.html — panels both above and below — use manual CSS transforms or combine two separate layout containers. The grid layout's offset-y is unidirectional by design (one offset value applied uniformly across all layers).

See Grid Depth for the same single-column setup with Z going the other direction, or all demos.