Grid Depth

Four panels in a single-column grid receding into the scene. count="1" stacks all panels as successive depth layers. offset-y adds a staircase descend as you move back.

Layer 1  ·  Z = −595 px  ·  Y = +100 px

Depth Tunnel

Setting count="1" creates a single column where every panel becomes a successive depth layer. The camera flies through the Z axis as you navigate between views. 

<div class="foldpage"
     data-foldpage-view-layout="grid"
     data-foldpage-view-layout-count="1"
     data-foldpage-view-layout-spacing-z="0.85"
     data-foldpage-view-layout-offset-y="100">
  <header data-foldpage-view="0">...</header>
  <section data-foldpage-view>...</section>
  
</div>
Layer gap = 700 px × 0.85 = 595 px. This panel: translateZ(−595px) translateY(100px).

Layer 2  ·  Z = −1190 px  ·  Y = +200 px

Spacing-Z

spacing-z sets the Z gap between layers independent of spacing, which controls column width. Adjust it to control how quickly the camera dives into the scene. 

/* Shallow dive — panels close together */
data-foldpage-view-layout-spacing-z="0.5"  /* 350px gaps */

/* Deep dive — panels far apart */
data-foldpage-view-layout-spacing-z="2.0"  /* 1400px gaps */

/* Negative — reverses Z direction (toward viewer) */
data-foldpage-view-layout-spacing-z="-1.0" /* see views-grid-vertical */
Layer 2: hello translateZ(−1190px) translateY(200px). The Y staircase keeps the panel visually centered as the camera tilts down.

Layer 3  ·  Z = −1785 px  ·  Y = +300 px

Offset-Y Staircase

offset-y shifts each successive depth layer down the screen. Combined with count="1", this creates a descending staircase — deeper panels sit lower, reinforcing the perspective of looking into the distance. 

/* No staircase — flat tunnel */
data-foldpage-view-layout-offset-y="0"

/* Gentle descent */
data-foldpage-view-layout-offset-y="60"

/* Steep descent */
data-foldpage-view-layout-offset-y="200"

/* Rising — negative shifts layers upward */
data-foldpage-view-layout-offset-y="-80"

Layer 4  ·  Z = −2380 px  ·  Y = +400 px

Manual Equivalent

This layout approximates the manual depth demo at views-depth.html, which uses hand-authored CSS transforms on each panel class. 

/* Manual (views-depth.html) */
.d1 { transform: translateZ(-520px); }
.d2 { transform: translateZ(-1100px) translateX(130px); }
.d3 { transform: translateZ(-1800px) translateX(-110px); }
.d4 { transform: translateZ(-2600px); }

/* Grid layout equivalent — no per-panel CSS */
data-foldpage-view-layout-count="1"
data-foldpage-view-layout-spacing-z="0.85"
data-foldpage-view-layout-offset-y="100"

See Grid Vertical for the same layout with spacing-z reversed (panels approaching the viewer), or all demos.