About Grid

Grid is similar to Section. However, Grid makes it easier and simpler to customize your columns.

Moreover, Grid allows more fancy features, such as radius border, cell gap, and more.

Usage

{{Grid|param1|param2}}

Parameters

Param Description
🍈 1: Grid Styling
GridClass General and overall HTML class(es) for the wrapper box.
GridStyle General and overall CSS style(s) for the wrapper box.
🍉 2: Grid Configuration
Width1, Width2, ... Width of column1, column2, etc. Will be described further in FAQ.
🍍 3: Header Styling
HClass General and base HTML class(es) for all header boxes.
HStyle General and base CSS style(s) for all header boxes.
HClass1, HClass2, ... HTML class(es) for first, second, ... header boxes.
HStyle1, HStyle2, ... CSS style(s) for first, second, ... header boxes.
🍒 4: Content Styling
CClass General and base HTML class(es) for all content boxes.
CStyle General and base CSS style(s) for all content boxes.
CClass1, CClass2, ... HTML class(es) for first, second, ... content boxes.
CStyle1, CStyle2, ... CSS style(s) for first, second, ... content boxes.
🍅 5: Header & Content
Header1, Header2, ... First, second, ... header text.
Content1, Content2, ... First, second, ... content wikitext.

FAQ

Q
How to define column widths?


You can use parameters like Width1, Width2, ... to configure width of each column. The values can be as following:

  1. auto - Width will be calculated automatically by browser.
  2. 20px - Width in pixels.
  3. 21.2cm, 25in, ... - Width in centimeters, inches, etc.
  4. 1.5em, 2.2rem - Width in em or rem. For these two units, see here.
  5. min-content - Width depends on maximum word width after trying all soft-wrapping opportunities. See Example.
  6. max-content - Width depends on maximum width of content with avoiding all wrap. See Example.
  7. 4fr - Width relative to divisions.

    For example, if you set first column to '3fr', and the second column to '4fr', then the total width will be split to 3 + 4 = 7 divisions.
    Hence, the first column will take 4 of 7, and the second column will take 3 of 7.

    Note: If there is any fixed length or min-content/max-content, the division will be made with the rest width after all other widths are allocated. See Example: Widths with `fr`.


A
Q
I did not see any parameters to set heights for header boxes and content boxes, how can I customize header height and content height?


You can just use parameters HClass and HStyle to set header height, or CClass and CStyle to set content height.

A

Examples

Ex: Widths with fr

Code
{{Grid | HStyle=background-color: lightblue; | CStyle=background-color: lightgreen; | Width1=1fr | Header1=Title1 | Content1=This column has <sup>1</sup>/<sub>4</sub> of (100% - 100px) width | Width2=100px | HStyle2=background-color: #ffc; | CStyle2=background-color: #fef; | Header2=Title2 | Content2=This column has fixed width 100px | Width3=3fr | Header3=Title3 | Content3=This column has <sup>3</sup>/<sub>4</sub> of (100% - 100px) width }}
Title1
Title2
Title3
This column has 1/4 of (100% - 100px) width
This column has fixed width 100px
This column has 3/4 of (100% - 100px) width

Ex: Widths with min-content and max-content

Code
{{Grid | HStyle=background-color: lightblue; | CStyle=background-color: lightgreen; | Width1=min-content | Header1=Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title | Content1=min-content, width match widest word in this sentence with soft-wrapping. | Width2=max-content | HStyle2=background-color: #ffc; | CStyle2=background-color: #fef; | Header2=Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title | Content2=max-content, width match title without wrapping. | Width3=3fr | Header3=Title3 | Content3=This column has <sup>3</sup>/<sub>8</sub> of rest width (3fr) | Width4=5fr | HStyle4=background-color: #ffc; | CStyle4=background-color: #fef; | Header4=Title4 | Content4=This column has <sup>5</sup>/<sub>8</sub> of rest width (5fr) }}
Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title
Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title
Title3
Title4
min-content, width match widest word in this sentence with soft-wrapping.
max-content, width match title without wrapping.
This column has 3/8 of rest width (3fr)
This column has 5/8 of rest width (5fr)