The UI Grid Block
The UI Grid block is a Pressino block designed to split the screen into columns for responsive content.
- Best used inside a UI Split or can be used at the top level
- Columns will automatically resize and stack as needed based on the size of the container they are in
- There is a minimum column width setting that helps assure the content will fit in the space provided
Getting Started
When a UI Grid block is added, it creates two columns, but more can be added. The columns will take up the available space for the container they are in. Once a column is smaller than the size it should be, it will wrap to the next line and all the columns will resize accordingly.
UI Grid Options
Column Width: To assure there is enough room for the content, set the column width as needed. Make it larger if the content gets too small before wrapping / stacking. Make it smaller if it jumps to the next line too early / content could be smaller.
Column Width: The size of the gap between columns when not stacked can be updated.
Centered: This control the alignment of wrapped columns. If there are four columns and one wraps to the next line, it is left justified by default. The Centered option will make extra columns be center aligned.
Grid Column Options
Centered: This control the alignment of the content of this column. Content is left justified by default. The Centered option will make the content of the column be center aligned.
Fill column with first item: This is an option used when there is a single container item, such as a UI Message or UI Segment, and you want it box to fit vertically along with the other grid columns in the same row.
