Cinecred

6.1. Grid Layout

The grid body layout arranges the body cells in a 2-dimensional grid. It should be used any time you want a fixed number of columns. It’s also the simplest choice when the body is expected to always have just a single cell.

Grid layout example

Filling Order

By default, the body cells fill the first row from left two right, then continue with the second row, and so on. You can change this filling order to right-to-left. And you can even completely fill the leftmost or rightmost column before continuing with the next column.

Setting demonstration

Balanced Filling

If the number of body cells doesn’t perfectly fill the grid, the cells in the last row are centered by default. This is more visually pleasant than if the cells were off to one side. If need be, you can of course disable this behavior.

Setting demonstration

Grid Structure

By default, the columns shrink to their minimum possible widths. For many designs however, it makes sense to have all columns share the same width to achieve visual uniformity. As a third option, you can even force all grid cells to be square, which can sometimes be useful for logos.

Setting demonstration

Force Column Width/Row Height

This setting forces all columns or rows to have a certain, manually specified width or height.

Setting demonstration

Match Column Widths

This setting forces each column to have the same width in all grids. By default, it only affects blocks of the same content style, but can be broadened to include other content styles.

If one of those other styles has more columns than this style, one can choose whether to match this style’s columns with the leftmost or rightmost columns of the other style. It’s also possible to insert empty ghost cells for the missing columns, which can help with alignment.

To break the enforcement at some point, use the @Break Match column in the Credits spreadsheet.

Setting demonstration

Match Row Height

This setting forces all rows to have the same height. The first option only affects cells inside the same block. The second option affects cells across all blocks with the same content style. This can be further broadened to include other content styles.

To break the enforcement at some point, use the @Break Match column in the Credits spreadsheet.

Setting demonstration

Justify Cells per Column

This setting defines the number of columns in the grid, and at the same time controls for each column whether its content should be justified left, centered, or justified right.

Setting demonstration

Align Cells

Sometimes, a row is higher than a cell’s content, for example when working with images of different sizes in the same row, or when using square cells. In these cases, this setting specifies whether the content should be aligned at the top, centered, or aligned at the bottom.

Setting demonstration

Row/Column Gap

This amount of blank pixels is inserted between rows respectively columns in the grid.

Setting demonstration