...
Rows: (For experienced users only) Here you can define rows manually. Simply enter the desired size and unit of your row. Separate individual entries with spaces. Please note that editing the grid using the grid tools is more comfortable and intuitive.
Container sizes
Full Width: Container occupies the full display width.
Adaptive: Limits the container size to 88% of the available display width. 6% padding is applied to each of the two sides, left and right.
Boxed: Limits the container width to the width of the content area.
Distribute cells horizontally - justify-content
This setting defines how additional free space within the container is used and arranged on the horizontal axis. Additional free space within your story can occur if the size of all cells is smaller than the container. For example, if you define three columns with absolute values of, say, 20%. So all columns of your story take only 60% of the container width, 40% are free space.
...
Start: All elements are left-aligned.
Center: All elements are aligned to the center.
End: All elements are right-aligned.
Space-between: Elements are arranged so that the free space between them is distributed.
Space-around: The free space is divided around each element.
Distribute cells vertically - align-content
This setting defines how additional free space inside the container is used and arranged on the vertical axis.
...
Start: All elements are aligned at the top.
Center: All elements are aligned to the center.
End: All elements are aligned to the bottom edge.
Space-around: Elements are arranged so that the free space between them is distributed.
Stretch: All elements are stretched over the free space and completely fill the container.
Auto flow (For experienced users)
If elements are not explicitly placed on the grid, they will be arranged automatically. For this, you have the following configuration options to customize the arrangement by the algorithm:
Rows: Fills rows first, adds new ones if needed.
Columns: Fills columns first, adds new ones if needed.
Rows without spaces: Similar to rows, but tries to fill gaps if possible. If subsequent elements are smaller and can fill spaces, they will be placed there.
Columns without spaces: Similar to columns, but tries to fill gaps if possible. If subsequent elements are smaller and can fill spaces, they will be placed there.
Style
Invert: Inverts text color and fade effect. This option is recommended for dark background colors to make text clearly readable.