Grid Layouts
Demonstrating how to define and apply layout templates on a slide grid
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Some ideas on grid layout for slides

This is not even a proposal

Layout templates

Principle

  • Rectangular named layout areas are positioned on a regular grid
  • Grid size is determined automatically from the layout spec
  • Illegal layout templates generate an inline error

Layout templates

Specification in YAML

  • Layout templates can be specified in meta data
  • Example with 3 layout areas in 3 by 3 grid
layouts:
  fancy:
  - h h h h
  - l b b b
  - l b b b
  short: "hhh|bbr|lff"

Source code

layouts:
  fancy:
  - h h h h
  - l b b b
  - l b b b
  short: "hhh|bbr|lff"

Slide with layout

This is it

  • Some text bbbb

This is it

  • Some text llll

This is it

  • Some text hhhh

This is also it

  • Shows up in the body cell too

Source code

# Slide with layout {layout="fancy"}

## This is it {.b}

- Some text bbbb

## This is it {.l}

- Some text llll

## This is it {.h}

- Some text hhhh

## This is also it

- Shows up in the body cell too

Using layout templates

Referenced

  • Boxes are assigned to layout areas by class or attribute
  • Example slide for the body area b of above layout

Slide with layout

This is it

  • Some text

This is also it

  • Shows up in the body cell too

Source code


# Slide with layout {layout="fancy"}

## This is it {.b}

- Some text

## This is also it

- Shows up in the body cell too

Using layout templates

Inline

  • Layout templates can be specified ad hoc in a slide attribute

Slide with ad hoc layout

Block allocation is the same

  • This is the header block

Source code

# Slide with ad hoc layout {layout="hhh|bbr|lff"}

## Block allocation is the same {.h}

- This is the header block