Basic Grid

 
 
 
 

Overview

A simple grid container for arranging items in uniform rows, with controls for items per row, alignment, and justification across breakpoints.

Usage

The Basic Grid provides a straightforward equal‑column layout where you choose 1–6 items per row and all items share the same width. It is ideal for card grids, feature lists, logo grids, or any content that should flow in uniform columns.

  1. Insert a Basic Grid block.
  2. Add Basic Grid Item blocks inside it.
  3. Set Items Per Row (1–6) in the Grid’s inspector. Configure different values per breakpoint as needed.
  4. Place any content inside each Grid Item.

The grid uses CSS class‑based layouts (method-layout-{n}) rather than inline grid/flex styles, with responsive variants like method-layout-mobile-1, method-layout-tablet-2, etc.

Child Blocks

Basic Grid (method/basic-grid)

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

The grid container.

AttributeTypeDefaultDescription
responsiveSettingsobject(see below)Items per row and spacing per breakpoint

Default responsiveSettings:

JSON
{
  "base":   { "enabled": true,  "gridCols": 3 },
  "mobile": { "enabled": false, "gridCols": 1 },
  "tablet": { "enabled": false, "gridCols": 2 },
  "wide":   { "enabled": false, "gridCols": 5 }
}

Control sets: Grid Options (RangeControl for gridCols, 1–6), MethodAlignmentControls (alignItems, justifyContent), MethodSpacingControls (padding, margin, gap), MethodResponsiveTabs, MethodStyleTag, useResponsiveSetter

Basic Grid Item (method/basic-grid-item)

An individual grid cell.

  • Parent: method/basic-grid
  • Inner blocks: Accepts any blocks
AttributeTypeDefaultDescription
responsiveSettingsobject(standard breakpoints)Padding per breakpoint

Control sets: MethodSpacingControls (padding only), MethodResponsiveTabs, MethodStyleTag

Frontend Rendering

The PHP render builds Bootstrap grid classes from the responsiveSettings:

HTML
<div class="method-basic-grid method-layout-3 method-layout-mobile-1 method-layout-tablet-2"
     id="method-{id}">
  <div class="method-inner-blocks">
    <!-- Grid Items -->
    <div class="method-grid-item-component" id="method-{id}">
      <div class="method-inner-blocks">
        {inner content}
      </div>
    </div>
  </div>
</div>

Filters

This block does not currently expose dedicated PHP filters. The method-layout-{n} classes are defined in Method’s global stylesheet.