Layout & Alignment
Flex direction, alignment grid, gap, and content distribution.
Containers use CSS flexbox for layout. The direction control switches between row (horizontal) and column (vertical) stacking. This determines how child elements are arranged inside the container.
Column direction is the most common choice for slide layouts, stacking elements top to bottom. Row direction is useful for side-by-side arrangements like icon-and-text pairs, multi-column layouts, or navigation elements.
The alignment grid is a 3x3 clickable matrix inspired by Figma. It lets you set both the main axis alignment (justify-content) and the cross axis alignment (align-items) in a single click. Each cell represents a combination like top-left, center-center, or bottom-right.
This is the fastest way to position content inside a container. Instead of separately configuring justify and align properties, just click the cell that matches the position you want.
The gap control sets the spacing between child elements inside a container. It is more reliable than using margins because it only applies between elements, not before the first or after the last child. Adjust it with the numeric input or scrub the label.
The justify-content property controls how child elements are distributed along the main axis. Options include start, center, end, space-between, and space-around. Use space-between to push the first and last child to the edges with equal spacing in between.
Combine distribution with the flex-grow property on individual children to create fluid layouts. A child with flex-grow set to 1 will expand to fill all remaining space in the container.