Working with Grid Layout

By default, slide content is stacked vertically from top to bottom. You can change this behavior by defining a layout grid, which gives you precise control over where and how elements appear on a slide. Using a grid not only improves the organization of your content but also makes more efficient use of the available space.

Syntax of Layout Expressions

A grid layout is defined by placing a bracketed expression immediately before the slide title (between the # and the title text). Rows are separated by slashes /, and within each row, numbers joined by + indicate how many columns each element should span. The total number of columns in the grid is determined by the sum of these numbers. All rows must add up to the same number of columns to form a consistent grid.

For example, the expression [2+2/1+3] creates a four-column grid. The first row has two elements, each spanning two columns, while the second row has two elements: one spanning a single column and the other spanning three columns. Both 2+2 and 1+3 add up to four, which defines the number of columns for the grid.

If a slide contains more elements than those specified in the grid expression, the extras are placed into an implicit grid. In this case, each additional element is automatically given a single column in a grid with the same number of columns as defined by the expression. For instance, if your grid is [3+2] but you add a third element, that extra element will appear in the next row as a single-column item in a five-column implicit grid. This implicit behavior ensures that overflow content is always displayed predictably without breaking the layout.

The grid layout applies to all block-level elements on a slide. This includes paragraphs, lists, images (when separated from surrounding text by blank lines), tables, and code blocks. If you want multiple elements to share a single grid position, you can group them so they’re treated as one. Within the group, the content stacks vertically, but the grid sees it as a single container element.

Grouping is done with triple colons ::: placed before and after the block. For example, in a [1+3/4/2+2] layout, you could place a group of four items in the first column of the first row, while another group spans the three remaining columns. This makes it possible to create well-balanced, intentional slide designs while keeping fine-grained control over how content flows across the grid.

Using the Grid Layout and Grouping Buttons

While bracketed layout expressions can be written directly in markdown (placed between # and the slide title text), you can also use the button to add or edit these expressions through a form. Clicking this button opens a dialog where each row of the grid can be entered on its own line in a text area. When you submit the form, the rows are automatically converted into a bracketed layout expression and inserted between # and the slide title text.

Similarly, while groups of slide elements can be created by manually adding ::: before and after the block of content, you can also highlight the elements you want to group in the markdown editor and then click the button. This will automatically wrap the selection with ::: lines.

The opening ::: line can optionally include a CSS class name to style the group. For example, ::: hidden will hide the grouped elements, while ::: centered will center-align them. The dialog shown when clicking the button also provides a dropdown of available classes that can be applied.

Real-time Layout Examples

Finally, you can experiment with real-time grid layout examples. Choose a layout, edit the markdown, and see your changes reflected instantly in the preview.