The grid module consists of two elements: row and cell. Rows are used to group cells together, and cells contain the actual elements of the document. Rows can contain any number of cells, but they may not contain any other elements. Modifiers control the structure of the cells within a single row. Row modifiers declare the default structure for all child cells. Cell modifiers affect only a single cell.

Modes

stacked

stacked is the default mode when no other mode is explicitly used. Each cell takes up all horizontal space, and thus each cell has its own line. Cells that are in stacked mode force the next cells to break a new line, no matter what mode the other one has. stacked comes handy with smaller viewports, where the elements would not fit if they were arranged horizontally.

auto

In auto mode, cells take up all the space horizontally. If there are adjacent cells with other size modifiers, cells with auto mode respect their size and fill the remaining space.

thin

thin mode is different from the previous two modes. Instead of expanding horizontally, it shrinks the cells as much as possible. Cells take up only as much space as their content requires. It may be thought like the inline box in CSS.

disabled

disabled mode removes the cells from the page layout.

Other sizing modifiers

The following modifiers are not independent and not controlled with tg-mode. However, they control the size of the cells, too, and may be used alongside the modes presented above.

span

tg-span sets the size of a cell based on the column count of the row. For example, within a row of 16 columns, tg-span(8) would make the cell span half of its horizontal space, and tg-span(4) one quarter.

When applied to a row, the row must be decessor of an element defining the column count using tg-size. The row does not need to be a direct children; there might be multiple ancestors between. This way the column count can be set for the whole document, or part of it, without needing to write it over and over again.

frac

tg-frac works the same way as tg-span, but uses fractions instead of columns. tg-span(4) would take up 1/3 of the space within a row with 12 columns, but only 1/4 within a row with 16 columns. tg-frac(1/2) always takes up half of the horizontal space, regardless of the column count.

Spacing

Spacing is relatively straightforward, and it is controlled with just one modifier: tg-space, that controls both horizontal and vertical spacing. There are also two derivatives to control only one of the axes: tg-space-x and tg-space-y The values are practically same as the ones used in Flexbox:

• between
• around
• evenly
• none

Positioning

Like spacing, positioning has just one modifier and two derivatives: tg-pos, tg-pos-x and tg-pos-y.

Supported values for this modifier are the following:

• start
• center
• end
• none

Gaps

Gaps are declared for row elements. The tg-gap modifier, and its two derivatives, tg-x-gap and tg-y-gap, control the gaps for horizontal and vertical axis. Gap sizes are configurable, and Tidgrid provides the following default configuration:

• none: 0rem
• xs: 0.25rem
• sm: 0.5rem
• md: 0.75rem
• lg: 1rem
• xl: 2rem

Order

The order modifier, tg-order, is used for cells only. Two values are currently supported:

• first
• last