SubGrid

The SubGrid component (ion-subgrid) creates a nested row inside a parent Grid section, allowing further column subdivision without introducing a new full-width section. It wraps its children in a <div class="row ..."> inside a column-width <div class="col-...">, enabling complex multi-column layouts within a single section.

SubGrid inherits the full set of Row, Column, and Section rendering parameters—including Row Columns (Small/Medium/Large), Gutter control, Vertical Alignment, Background Image/Video, and a Title with configurable Heading Size. Its inner bs-section placeholder accepts any child renderings (Rich Text, Cards, Images, etc.), which are laid out as columns within the SubGrid’s row.

Use SubGrid when you need an additional level of column structure inside an existing section rather than creating a separate top-level section.

Examples

Live Example

Below is a live ion-subgrid rendering placed inside the Examples section. The SubGrid is configured as a 2-column row at medium breakpoint, containing two Rich Text paragraphs that occupy equal columns. This demonstrates how a SubGrid creates an additional level of column structure nested within the parent section’s row.

Column A

Left Column

This Rich Text paragraph sits in the first column of the SubGrid. The SubGrid’s RowColumnsMedium is set to 2, so this content occupies 50% width at the medium breakpoint and above.

Column B

Right Column

This Rich Text paragraph sits in the second column of the SubGrid. Both columns stack vertically on smaller viewports because no Small column class is specified—only RowColumnsMedium=2 applies.

Usage Notes

Usage Notes

  • SubGrid must be placed inside a parent Grid section’s placeholder. It cannot function as a top-level section.
  • The SubGrid wraps its children in a <div class="col-..."><div class="row ..."> structure, so its Column parameters control how wide the SubGrid itself is within the parent row, and its Row parameters control how children are arranged inside.
  • Set RowColumnsMedium to define how many equal-width columns child renderings occupy at the medium breakpoint. Leave it blank for default Bootstrap auto-layout.
  • Use GridGutterX and GridGutterY to control horizontal and vertical spacing between child columns within the SubGrid.
  • The optional Title parameter renders a heading above the SubGrid’s children. Use HeadingSize to control its visual size and LowerHeadingImportance to push the heading level down in the document outline.
  • BackgroundImage and BackgroundVideoLink allow decorative backgrounds on the SubGrid wrapper. The image uses background-size: cover and respects the ImagePosition parameter for alignment.
  • SubGrid supports all standard column parameters (Small, Medium, Large, OffsetSmall, etc.) for controlling its own width within the parent row.
  • Any rendering can be placed inside the SubGrid’s bs-section placeholder: Rich Text, Cards, Images, or even another SubGrid for deeper nesting.

Control Properties

Control Properties

Standard Values / Defaults

The SubGrid rendering parameters template inherits from three base templates (Row, Column, and Section). The __Standard Values item explicitly sets the following defaults:

PropertyDefault ValueNotes
GridPaddingTop(empty)No top padding by default.
GridPaddingBottom(empty)No bottom padding by default.
BorderBottom(empty)No bottom border by default.
ImagePositioncenter-centerCode-level fallback when no dictionary phrase is set.
All other parameters(empty / not set)Inherited blank from base templates. No row-columns, gutters, margins, colors, or overlays are applied unless explicitly configured.

Column Parameters (SubGrid’s own width)

PropertyTypeDescription
SmallColumn WidthBootstrap column class at the small breakpoint for the SubGrid wrapper.
MediumColumn WidthBootstrap column class at the medium breakpoint for the SubGrid wrapper.
LargeColumn WidthBootstrap column class at the large breakpoint for the SubGrid wrapper.
OffsetSmall / OffsetMedium / OffsetLargeColumn OffsetColumn offset at each breakpoint.
VerticalAlignmentDictionary PhraseVertical alignment of the SubGrid column itself within the parent row (e.g. align-self-center).
TextAlignmentDictionary PhraseText alignment within the SubGrid column.
PaddingTop / PaddingBottom / PaddingStart / PaddingEndDictionary PhrasePadding on the SubGrid column wrapper.

Row Parameters (child layout inside SubGrid)

PropertyTypeDescription
RowColumnsSmallDictionary PhraseNumber of equal-width columns for children at the small breakpoint (e.g. row-cols-1). Also adds row-cols-1 as a base class when set.
RowColumnsMediumDictionary PhraseNumber of equal-width columns for children at the medium breakpoint (e.g. row-cols-md-2).
RowColumnsLargeDictionary PhraseNumber of equal-width columns for children at the large breakpoint (e.g. row-cols-lg-3).
GridGutterXDictionary PhraseHorizontal gutter between child columns (e.g. gx-3).
GridGutterYDictionary PhraseVertical gutter between child rows (e.g. gy-3).
GridVerticalAlignmentDictionary PhraseVertical alignment of children within the row (e.g. align-items-center).
GridHorizontalAlignmentDictionary PhraseHorizontal alignment of children within the row (e.g. justify-content-center).
GridTextAlignmentDictionary PhraseText alignment applied at the row level.

Section / Display Parameters

PropertyTypeDescription
ColorDictionary PhraseBackground colour name (combined with Shade to produce mkl-bg-{color}-{shade}).
ShadeDictionary PhraseColour shade suffix (defaults to 500 in code when Color is set).
UseLightTextCheckboxAdds light-text class for light-on-dark text.
GridPaddingTopDictionary PhraseTop padding on the row/section wrapper (e.g. pt-3).
GridPaddingBottomDictionary PhraseBottom padding on the row/section wrapper (e.g. pb-3).
GridMarginTopDictionary PhraseTop margin on the row/section wrapper.
GridMarginBottomDictionary PhraseBottom margin on the row/section wrapper.
GridBorderLeft / GridBorderRight / GridBorderTop / GridBorderBottomCheckboxAdds section-border-* class when checked.
TitleSingle-Line TextOptional heading rendered above child content.
HeadingSizeDictionary PhraseVisual size class for the title heading element.
LowerHeadingImportanceCheckboxWhen checked, pushes the heading level down in the document outline hierarchy.
BackgroundImageImageBackground image applied to the SubGrid wrapper with background-size: cover.
ImagePositionDictionary PhraseCSS background-position value (code default: center-center).
BackgroundVideoLinkGeneral LinkURL to a background video (MP4) displayed behind the SubGrid content.
OverlaySmall / OverlayMedium / OverlayLargeDictionary PhraseBackground image overlay class at each breakpoint.
AddClassSingle-Line TextAdditional CSS classes appended to the SubGrid wrapper.

Template properties

Control properties