Skip to main content

counterAxisSpacing

Applicable only on "HORIZONTAL" or "VERTICAL" auto-layout frames with layoutWrap set to "WRAP". Determines the distance between wrapped tracks. The value must be positive.

Signature

counterAxisSpacing: number | null

Remarks

Set this propety to null to have it sync with itemSpacing. This will never return null. Once set to null, it will start returning the value of itemSpacing.

Auto-layout frame with children wrapping to the next line
const parentFrame = figma.createFrame()
parentFrame.appendChild(figma.createFrame())
parentFrame.appendChild(figma.createFrame())
parentFrame.appendChild(figma.createFrame())

// Make children flow horizontally and wrap
parentFrame.layoutMode = 'HORIZONTAL'
parentFrame.layoutWrap = 'WRAP'

// Set a fixed width so when we set itemSpacing below, the children will wrap
parentFrame.primaryAxisSizingMode = 'FIXED'

// Let the height of the parent frame resize to fit the children
parentFrame.counterAxisSizingMode = 'AUTO'

// Horizontal gap between children
parentFrame.itemSpacing = 10

// Parent frame
// +------------------------------------------+
// |+-----------+ +-----------+ |
// || | | | |
// || Child 1 | -- 10 -- | Child 2 | |
// || | | | |
// |+-----------+ +-----------+ |
// | | |
// | | |
// | 20 |
// | | |
// | | |
// |+-----------+ |
// || | |
// || Child 3 | |
// || | |
// |+-----------+ |
// +------------------------------------------+
parentFrame.counterAxisSpacing = 20