Split

The split layout positions items horizontally in a container, with one item filling the remaining horizontal space as the viewport is resized.

1. Split: The split container, which holds all split items.
2. Split item: An individual section of content to be placed in the split layout.

Use the split layout when content should be flexible and may change dynamically.

You can specify which split item fills the remaining horizontal space in the layout. More than one item can be set to fill, and they will share the remaining space equally.

You can wrap split items to ensure that they fit among other content as the screen is resized. To implement wrappable items, refer to the related React and HTML examples.

To adjust spacing between split items, you can apply gutters.