Stack

The layout arranger — lanes in one of two grid engines, with direction, reverse, alignment, band padding and a measure cap.

Each example measures itself, so its gutters are to scale rather than to the page's. The arrangements are exact.

Show guides
PropDescriptionDefaultControl
patternratio (default) lays lanes out by weight; snap places them on a fixed 25-column grid shared by every Sectionratiosnapratio
laneslane weights, such as 2|1, or a number of equal lanes. Children fill lanes in order; extra children start a new row. In code it can change by breakpoint: { base: 1, md: 1|1 }1
directionlanes as columns (horizontal) or rows (vertical). Ratio onlyhorizontalverticalhorizontal
reversereverse the lane order. In code it can change by breakpoint: { base: true, md: false }false
alignhow lanes line up with each other. Default stretch makes them equal heightstretchstartcenterendstretch
  • stretch
  • start
  • center
  • end
maxWidthcap the content width and centre it: prose, panel, content, wide or a CSS length. Blank is full width
gapspace between lanes, a layout spacing step. Default 200-511-5234682
  • 0
  • 0-5
  • 1
  • 1-5
  • 2
  • 3
  • 4
  • 6
  • 8
paddingXpadding at the band's left and right edges. Default 2; none inside another Stack or a nested Section. Ratio onlynone00-511-5234682
  • none
  • 0
  • 0-5
  • 1
  • 1-5
  • 2
  • 3
  • 4
  • 6
  • 8
paddingToppadding above the band. Default 2; none inside another Stacknone00-511-5234682
  • none
  • 0
  • 0-5
  • 1
  • 1-5
  • 2
  • 3
  • 4
  • 6
  • 8
paddingBottompadding below the band. Default 2; none inside another Stacknone00-511-5234682
  • none
  • 0
  • 0-5
  • 1
  • 1-5
  • 2
  • 3
  • 4
  • 6
  • 8