A split pushes its children to opposite ends of the container, filling the space between them. It’s what you want whenever you need a logo on one side and navigation on the other, a section heading paired with an action button, or a list item whose label and value sit at opposite ends of the row. Any number of children work: the first one hugs the start, the last one hugs the end, and anything in between is evenly distributed.
By default a split runs horizontally; append :column to stack items vertically instead. When the container gets too narrow for everything to fit on one row, the items wrap automatically.
<divclass="cs-split"><div></div><div></div></div>
Examples
Splits are especially helpful for navigation, header, and footer layouts.
By default, items are centered on the cross axis of the cs-split container. Add any cs-align-items-* class to change how items line up: in the block direction for cs-split:row and in the inline direction for cs-split:column.
A split’s gap determines how close items can be before they wrap. By default, the gap between split items uses --cs-space-m from your theme. Add any cs-gap-* class to change the spacing between items.
