Template:Grid/doc

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: auto - Width will be calculated automatically by browser. 20px - Width in pixels. 21.2cm, 25in, ... - Width in centimeters, inches, etc. 1.5em, 2.2rem - Width in em or rem. For these two units, see here. min-content - Width depends on maximum word width after trying all soft-wrapping opportunities. See Example. max-content - Width depends on maximum width of content with avoiding all wrap. See Example. 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 ¹/₄ of (100% - 100px) width

This column has fixed width 100px

This column has ³/₄ 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 ³/₈ of rest width (3fr)

This column has ⁵/₈ of rest width (5fr)