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, a grid takes up full width, and its columns divide the grid width evenly (at least 16em wide), with 2em-wide gaps in between. When columns overflow, a horizontal scrollbar is enabled.

Classes that may help

Adding a nowrap class to a grid changes minimum column width from 16em to max-content (the minimum width such that text within cells doesn't auto wrap and blocks don't overflow). Adding a nowrap class to a cell prevents text in that cell only from auto wrap.

When a grid is wide enough, its columns can flex to fill the available space. If you want compact columns that always take up max-content width, add a vg-compact class to the grid. If you want the grid centered when screen is wider, add a vg-compact-centered class instead.

Cells are aligned the top of rows by default. Adding a vg-row-centered class to the grid aligns each cell in the middle of its row instead.

When you want to number the rows (e.g. show the page numbers of a reading material), add a vg-row-numbered class to the grid. This makes the first column "max-content" and adds 1em-tall row gaps. Then add a vgc-row-number class to each cell in the first column. These cells will have a right border that indicates row heights, and you don't need to specify their column arguments manually.

CSS attributes that may help

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 rows apart.

Examples

See these articles for examples:

(To be added)