420
edits
Template:VerticalGrid/doc: Difference between revisions
→Classes that may help
HyperNervie (talk | contribs) No edit summary |
HyperNervie (talk | contribs) |
||
| Line 27: | Line 27: | ||
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. | 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 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. If you want the grid centered when screen is wider, add a <code>vg-compact-centered</code> class instead. | ||
Cells are aligned the top of rows by default. Adding a <code>vg-row-centered</code> 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 <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. | 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. | ||