Advanced Grid

Overview

A flexible CSS Grid container for building complex, responsive layouts with precise control over columns, rows, and spacing.

Usage

The Advanced Grid implements a 24‑column Bootstrap grid system through a three‑tier nesting structure: Grid → Row → Column. Each Column can independently control its span (1–24), offset (0–24), and visual order at every breakpoint, enabling complex responsive layouts that go well beyond WordPress’s native columns block.

1. Insert an Advanced Grid block.
2. Add one or more Row blocks inside it.
3. Add Column blocks inside each Row and configure their span/offset.
4. Place any content blocks inside the Columns.

Enable the Highlight Grid Structure toggle in the Grid’s inspector to visualize the grid, rows, and columns with visible outlines during editing.

Child Blocks

Advanced Grid (method/advanced-grid)

• Block name: method/advanced-grid
• Category: method-layout-blocks
• Render type: Dynamic (PHP render_callback)
• Inner blocks: Yes — method/advanced-grid-row only

The outermost wrapper. Houses rows and provides grid‑level spacing and typography.

Control sets: MethodSpacingControls (padding, margin), MethodTypographyControls, MethodResponsiveTabs, MethodStyleTag

Row (method/advanced-grid-row)

A structural row that groups columns. Provides flex alignment and gap controls.

• Parent: method/advanced-grid
• Allowed children: method/advanced-grid-col

Control sets: MethodAlignmentControls (alignItems, justifyContent), MethodSpacingControls (padding, margin, gap — horizontal/vertical), MethodTypographyControls, MethodResponsiveTabs, MethodStyleTag

Column (method/advanced-grid-col)

An individual column with configurable span, offset, and order.

• Parent: method/advanced-grid-row
• Inner blocks: Accepts any blocks

Default responsiveSettings:

{
  "base":   { "enabled": true,  "gridCols": 8 },
  "mobile": { "enabled": false, "gridCols": 24 },
  "tablet": { "enabled": false, "gridCols": 12 },
  "wide":   { "enabled": false, "gridCols": 6 }
}

Per‑breakpoint column properties:

• gridCols (1–24) — number of columns to span
• offset (0–24) — number of columns to offset from the left
• order — CSS order value for reordering columns
• hide — mobile, tablet and wide only: hides the column at that breakpoint (display: none; visibility: hidden)

Control sets: Column Options panel (RangeControl for gridCols and offset), MethodSpacingControls (padding all sides, margin top/bottom), MethodTypographyControls, MethodColorControls (textColor, linkColor), MethodAddtControls (hide, in the mobile / tablet / wide tabs), MethodResponsiveTabs, MethodStyleTag, useResponsiveSetter

Frontend Rendering

The PHP render builds Bootstrap grid classes from the responsiveSettings:

<div class="method-advanced-grid" id="method-{id}">
  <!-- Row -->
  <div class="method-advanced-grid-row-wrap" id="method-{id}">
    <div class="row method-advanced-grid-row">
      <!-- Column -->
      <div class="col-{n} offset-{n} col-md-{n} offset-md-{n} ..." id="method-{id}">
        <div class="method-advanced-grid-col-content">
          {inner content}
        </div>
      </div>
    </div>
  </div>
</div>

Column classes use Bootstrap’s breakpoint prefixes (e.g., col-md-8 offset-md-2 col-lg-6 offset-lg-3), derived from method_get_breakpoint_class_prefixes().

Filters

This block does not currently expose dedicated PHP filters. The breakpoint prefix mapping is controlled by method_get_breakpoint_class_prefixes() in the theme’s helper functions.

Changelog