Grid Shortcode
The Grid shortcode creates a table-based multi-column layout. Use the [grid] shortcode as the container and
place one or more [col] shortcodes inside it.
Syntax :
[code][grid responsive="true/false"]
[col width="50%" align="top left"] Content [/col]
[col width="50%" align="top center"] Content [/col]
[/grid][/code]
[hr]
Grid Parameters
| Parameter | Description |
|---|---|
| responsive | Determines whether columns automatically stack on smaller screens. Use true to enable responsive behavior or false to keep the original layout. |
Column Parameters
| Parameter | Description |
|---|---|
| width | Sets the width of the column. Example: 50%, 33%, 60%. |
| align | Controls the vertical and horizontal alignment of the content inside the column. |
Align Values
| Axis | Available Values |
|---|---|
| Vertical | top, center, bottom |
| Horizontal | left, center, right |
Example:
[code]align="center left"[/code]
This means:
- Vertical alignment: center
- Horizontal alignment: left
[hr]
Example: Text and Image Layout
[code][grid responsive="true"]
[col width="50%" align="center left"]
Text on the left, left-aligned and vertically centered.
[/col]
[col width="50%" align="center right"]
Insert image here
[/col]
[/grid][/code]
[grid responsive="true"]
[col width="50%" align="center left"]
Text on the left, left-aligned and vertically centered.
[/col]
[col width="50%" align="center right"]
[/col]
[/grid]
Explanation:
- The first column uses 50% of the available width.
- The second column uses 50% of the available width.
- The text is aligned to the left and centered vertically.
- The image is aligned to the right and centered vertically.
- Because responsive="true" is used, the layout automatically adapts to smaller screens by stacking columns when needed.
[hr]
Example: Three Columns
[code][grid responsive="false"]
[col width="33%" align="center center"] Column 1 [/col]
[col width="33%" align="center center"] Column 2 [/col]
[col width="34%" align="center center"] Column 3 [/col]
[/grid][/code]
[grid responsive="false"]
[col width="33%" align="center center"] Column 1 [/col]
[col width="33%" align="center center"] Column 2 [/col]
[col width="34%" align="center center"] Column 3 [/col]
[/grid]
Explanation:
- Creates a three-column layout.
- The columns occupy 33%, 33%, and 34% of the total width.
- The content is centered both horizontally and vertically within the column.
- Because responsive="false" is used, the layout remains fixed on all screen sizes.