420
edits
Template:VerticalGrid/doc: Difference between revisions
Jump to navigation
Jump to search
no edit summary
HyperNervie (talk | contribs) (→Cell: I mistook semicolon for colon 😰) |
HyperNervie (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
__NOTOC__ | |||
== Grid == | == Grid == | ||
{{shortcut|template=1|vg}} | {{shortcut|template=1|vg}} | ||
| Line 14: | Line 15: | ||
Parameters: | Parameters: | ||
* {{param|1}}: Content of the cell. | * {{param|1}}: Content of the cell. | ||
* {{param|poem}}: If given, replace the content with the output of passing this argument to {{tlc|Poem}}. (So that you don't need to transclude {{ | * {{param|poem}}: If given, replace the content with the output of passing this argument to {{tlc|Poem}}. (So that you don't need to transclude {{tc|Poem}} yourself.) | ||
* {{param|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 <code>''x''/''z''</code> or <code>''x''/span ''y''</code>. | * {{param|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 <code>''x''/''z''</code> or <code>''x''/span ''y''</code>. | ||
* {{param|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 <code>span ''x''</code>; otherwise, omit this argument. | * {{param|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 <code>span ''x''</code>; otherwise, omit this argument. | ||
| Line 21: | Line 22: | ||
== Styling == | == Styling == | ||
By default, columns divide the grid width evenly (at least 16em wide), with 2em-wide gaps in between. | 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 <code>nowrap</code> class to a grid changes minimum column width from 16em to [https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-content max-content] (the minimum width such that text within cells doesn't auto wrap and blocks don't overflow). Adding a <code>nowrap</code> 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 <code>vg-compact</code> class to the grid. | |||
When you want to number the rows (e.g. show the page numbers of a reading material), add a <code>vg-row-numbered</code> class to the grid. This makes the first column "max-content" and adds 1em-tall row gaps. Then add a <code>vgc-row-number</code> 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 <code>column</code> arguments manually. | |||
=== CSS attributes that may help === | |||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap column-gap]</code> (grid only) | * <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap column-gap]</code> (grid only) | ||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap row-gap]</code> (grid only) | * <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap row-gap]</code> (grid only) | ||
| Line 29: | Line 37: | ||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/align-self align-self]</code> (cell only) | * <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/align-self align-self]</code> (cell only) | ||
* <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align]</code> | * <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align]</code> | ||
Notice that if {{ | Notice that if {{tc|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 <code>row-gap</code> attribute when the margins are enough to tell rows apart. | ||
== Examples == | |||
See these articles for examples: | |||
* (To be added) | |||
<noinclude>[[Category:Template documentation]]</noinclude><includeonly>[[Category:Templates]]</includeonly> | |||