Spacer

The spacer component draws nothing. It fills its cell with empty space and counts as content, so the row and column it sits in are never collapsed. The Designer calls it Spacer. Use it to keep a fixed-size track alive for alignment, for example a gutter column that stays at the right of a text column even when nothing else is in it.

{"type":"spacer"}

Realistic example

A text column and a 16 point gutter column that holds a spacer, so the gutter exists on every banner.

{"name":"spacer-demo","app":"example.bidbot","layoutVersion":2,"collapseEmpty":true,
 "grid":{"rows":1,"cols":2,"rowSizes":["auto"],"colSizes":["fill",16],"gap":0,"padding":12,"width":380},
 "cells":[
  {"id":"title","row":0,"col":0,"component":{"type":"text","binding":"{title}","style":"title"}},
  {"id":"gutter","row":0,"col":1,"component":{"type":"spacer"}}]}

Properties

A spacer has no other properties. It has no emptyBehavior either: any emptyBehavior you write is ignored.

Sizing#

A spacer has no width or height of its own. The size of its cell comes from the grid.

• A fixed or fill track keeps its size, and an auto track that holds only a spacer is zero wide or tall.
• A spacer is never empty, so a row or column that contains one is never collapsed by the collapse planner. That is the reason to use one: it holds a track open.
• It is transparent and has no action. Its alignment does not matter.

Common mistakes#

Related#

• The grid, cells and layout: track sizes and the collapse planner.
• Components: how empty components collapse.
• Designing a banner: adding a Spacer in the Designer.