skip to content
MusesΜοῦσαιdocs

writing / 07 of 13

Grids and master layouts

Split a slide into rows and columns with grid tags. Then reuse a layout across slides with master layouts, filling their holes with slots.

Rows and columns

Three tags lay a slide out: [grid], [row] and [col], each closed with its slash form. [column] is the same as [col].

markdown
[row gap=2]
[col span=2 border=rounded pad=1]
## Left
Two thirds of what's left after the right column.
[/col]
[col width=30% border=rounded pad=1]
## Right
A fixed 30% of the row.
[/col]
[/row]

An opening tag has to start its line. Leading spaces are fine, and so is following another tag directly, as in [grid][col]. A closing tag can end a line of content, which keeps a short column on one line: [col]Left[/col].

Tags inside code blocks are left alone, and a slide can show grid markup in one.

Implicit rows and columns

You don’t have to spell out every level:

  • Inside a [grid], a run of columns shares one row, and content outside any column gets a full-width row of its own.
  • Inside a [row], content outside any column gets a column of its own.
  • A closing tag for an outer container also closes whatever is open inside it.

Grids nest: a column can hold another [grid]. If the slide ends with a tag still open, the slide shows a red ⚠ unclosed [col] line where the trouble is.

Attributes

Attributes go inside the opening tag as name=value. Quote values that contain spaces: pad="1 2".

attribute on values what it does
width col 20 cells, 30%, 2fr The column’s width.
height row, grid 8 lines, 50%, 1fr, auto The row’s or grid’s height.
span col, row a number above 0 A share of the free space, like fr. Ignored when width or height is set.
gap grid, row whole cells, 0 or more Space between rows (on a grid) or columns (on a row). A row without its own gap uses its grid’s.
pad any 1, or "1 2" for vertical then horizontal Padding inside the box.
align any left center right Horizontal alignment of the content.
valign any top middle bottom Vertical alignment.
border any any border name, or none Draws a frame around the box.
border_color any a colour The frame’s colour.

How space is shared

A column with no size counts as 1fr. Plain columns share the row evenly. Gaps and fixed sizes, cells and percentages, come off first, and the fr and span columns split what’s left in proportion. If the fixed sizes don’t fit, every column shrinks by the same factor.

Rows work the same way down the slide, but a row with no height is as tall as its content.

Master layouts

A master layout is a slide-shaped template with holes in it. Define it once in kyma.yaml, and any slide can fill it with master:.

kyma.yaml
masters:
  two-col: |
    [row gap=2]
    [col span=2]
    [slot content]
    [/col]
    [col]
    [slot side]
    [/col]
    [/row]
talk.md
---
master: two-col
---

# Headline

The body of the slide.

[slot side]
- a note
- another
[/slot]

master: names an entry under masters:, or a layout file. master: layouts/two-col reads layouts/two-col.md, and the file holds the same markup as a masters: entry.

Slots

A slot is a named hole: [slot side] in the layout, filled by a [slot side] … [/slot] block in the slide. A bare [slot] is the slot called content, and anything the slide writes outside a slot block goes there.

  • A block in the layout, [slot side]Nothing yet[/slot], is the slot’s default, kept when the slide doesn’t fill it.
  • Filling a slot twice joins the two with a blank line.
  • A slot the layout doesn’t have is dropped.
  • Put the closing [/slot] at the end of a line.

On a slide without a master, slot tags are removed and their content kept in place, so a deck still reads sensibly if a layout goes missing.