Snap Layouts Syntax

Snap Layouts Basic Syntax


To activate snap-layouts for any block of markdown on your slide simply wrap the block in opening @snap and closing @snapend tags, as shown in the above screenshot.

  1. The first property on the opening tag always indicates a snap-position on the snap-layouts grid.
  2. The second property is typically a span-xxx value to control the width and height of the snapped content.

The following sections introduce the snap-layouts grid itself, plus positioning and sizing controls for snapped content within the grid.

Snap Layouts 3x3 Grid


The snap-layouts system makes use of a 3x3 grid. We can see here how that grid system maps onto the area for a slide. Each grid-area is a possible target snap-position for snapped content on your slide. Using snap-layouts content sizing you can then control what portion of the slide is used to render specific blocks of snapped content.

Snap Layouts Content Positioning


Each distinct grid-area is addressed using compass coordinates, for example, north, south, east, west, etc. The following markdown snippet demonstrates the use of snap-layouts to position content in the west area of the grid:

@snap[west span-50]
### Architecture Diagram

To relocate this sample snapped content from the west to the north-east position on your slide you need simply update the snap-position property on the opening @snap tag as follows:

@snap[north-east span-50]
### Architecture Diagram

The full set of supported snap-positions are as follows:

  • midpoint
  • north
  • south
  • east
  • west
  • north-east
  • north-west
  • south-east
  • south-west

Note, the midpoint snap-position target can be used to center snapped content of your slide. The use of a snap-position as the opening property on an opening @snap tag is required. It is also worth noting that these property names are case-sensitive.

Snap Layouts Content Sizing

By default, the space used to render content on your slides is determined by the following:

  1. The content itself, for example, the number of words on your slide.
  2. The fixed theme active for your slide deck.
  3. The aspect ratio of non-text based content such as images, etc.

It is important to understand that there are limits to the amount of content you can add to a slide before it will overflow the slide. For example, if you add a lengthy paragraph of text to your slide then unless you actively take steps to constrain the size of that content it is very likely that your text is going to overflow. This can be readily understood when you consider the impact of the active fixed theme for your slide deck.

The fixed theme for your slide deck determines the default font-sizes, padding, margins, etc. used to render your content. As a result, these style rules have a major impact on how much slide space is used to render your content. It is worth noting that you do have the ability to override these defaults with your own custom style rules.

Non-text based content such as images come in all shapes and sizes. But the aspect ratio of your slides is fixed at 16:9. So if you are using images with an aspect ratio that differs from your slide deck then you may need to take steps to constrain that content to fit within the bounds of your slides.

Thankfully snap-layouts makes it very simple to take complete control over sizing of content on your slides. Lets look again at the sample slide markdown from above:

@snap[west span-50]
### Architecture Diagram

The combination of the west and span-50 properties ensure this block of snapped content uses just 50% of the available width, starting from the left side of the slide, to render this content. Both the markdown heading text and the accompanying image are automatically constrained by fit within this region of the grid.

We could easily adjust this value of the span-xxx property to increase or decrease the amount of space given to the snapped content on our sample slide, for example:

@snap[west span-33]
### Architecture Diagram

As a general rule, by constraining the width of snapped content using a span property, the height of that content is adjusted proportionally. You can learn many different way to take control of the size of content on your slides in the CSS Utility Styles Guide.

The next chapter in this guide provides us with our first concrete example of slide content-sizing on the snap-layouts grid.