Template:VerticalGrid/doc

Grid

Shortcut

• {{vg}}

Template:VerticalGrid creates a grid where cells are filled vertically. This helps with the typesetting of reading materials and lyrics. If presenting these things in a table, selecting text in a single column across rows also selects text from other columns, which is annoying when readers want to copy text in one language; on narrow devices, such contents are usually squeezed and make trouble for mobile viewers. By using this template properly, these problems can be addressed.

Parameters:

• {{{1}}}: Contents of the grid. Use {{VerticalGridCell}} to create cells.
• {{{class}}}: Space-separated HTML classes to add to the grid. A grid always has a vertical-grid class.
• {{{style}}}: CSS to add to the grid.

Cell

Shortcut

• {{vgc}}

Template:VerticalGridCell creates a cell that adds to a grid created with {{VerticalGrid}}.

Parameters:

• {{{1}}}: Content of the cell.
• {{{poem}}}: If given, replace the content with the output of passing this argument to {{Poem}}. (So that you don't need to transclude {{Poem}} yourself.)
• {{{column}}}: Column number starting from 1. To span across several columns (assume the cell is in column x and you want it to span across y columns so that the next column is z=x+y), fill x/z or x/span y.
• {{{row}}}: Usually the cell is placed below cells before it that take up the same column, so the row number is automatic. If the cell spans across several rows (assume x rows), fill span x; otherwise, omit this argument.
• {{{class}}}: Space-separated HTML classes to add to the cell. A cell always has a vertical-grid-cell class.
• {{{style}}}: CSS to add to the cell. The semicolon after the last CSS attribute cannot be omitted.

Styling

By default, columns divide the grid width evenly (at least 16em wide), with 2em-wide gaps in between. Adding a nowrap class to the grid changes minimum column width from 16em to a value such that text within cells doesn't auto wrap. In both cases, if columns overflow, a horizontal scrollbar is enabled.

You might be interested in these CSS attributes:

• column-gap (grid only)
• row-gap (grid only)
• align-items (grid only)
• align-self (cell only)
• text-align

Notice that if {{Poem}} is used in cells, there will be margins as a consequence of <p> tags coming with poem, making visual gaps between cells. So you don't need to set the row-gap attribute when the margins are enough to tell cells apart.