Basic layouts

Elements inline
Fixed width column + remaining width column
Auto width column + remaining width column
Stacked
Stacked and stretched

Algorithmic responsive layouts

Using Arrange and Split components we can build responsive layouts without CSS media queries. Resize to see the effect.


Fixed width column + remaining width column
Nested columns that wrap at different screen sizes
Equal flex columns
Equal flex columns
Equal grid columns
Columns with space between
Inline wrapping elements
Columns with equal height

Layout use cases

Icon with text
Actions
Full width buttons | responsive
Media element | responsive