Layout Grid

The Kindling 12-column grid system—Matchbox Grid System wrapper, grid items, span styles, and responsive behavior.

Overview

The Kindling Grid System gives you a flexible way to create multi-column layouts using a 12-column grid. Instead of manually managing columns, you can select from predefined styles like 1/2, 1/3, or 2/3. These styles automatically adapt to different screen sizes, so your layouts look good on mobile, tablet, and desktop.

Key Points

The grid is based on a 12-column layout on desktop, which collapses to 6 columns on mobile for readability.
The grid wrapper (the container for your items) must use the Matchbox Grid System style.
Grid items are added inside the wrapper and given a span style (e.g., “1/2” or “Full → 1/3”) that controls how much space they take up.
You don’t need to write any code — everything is available as block styles in the editor.

How to Set Up a Grid

Add the wrapper
- Insert a Group block (or container block).
- In the Block Styles panel, choose “Matchbox Grid System”.
- This turns the group into a responsive grid container.
Add grid items
- Inside the wrapper, insert Grid Item blocks.
- Each Grid Item is a container where you can add any content: headings, text, images, buttons, etc.
Choose a span style
- Select a Grid Item block.
- In the Block Styles panel, choose how wide the item should be:
  - 1/2 → half the grid
  - 1/3 → one third of the grid
  - 2/3 → two thirds of the grid
  - 1/4 → one quarter of the grid
  - Full → 1/2 → full width on small screens, half on larger screens
  - Full → 1/3 → full width on small screens, one third on larger screens
  - Full → 2/3 → full width on small screens, two thirds on larger screens
  - Full → 1/4 → full width on small screens, one quarter on larger screens

Responsive Behavior

The grid system automatically adapts your layout:

Mobile (≤767px):
- The grid becomes 6 columns.
- “Full →” styles expand to full width for readability.
- Fractions adjust to fit the 6-column grid (e.g., 1/2 becomes 3 of 6).
Tablet (768–1023px):
- Some items that are partial on desktop may also expand to full width to avoid cramped layouts.
Desktop (≥1024px):
- The grid displays all spans exactly as you selected them.

You don’t need to do anything extra — this happens automatically.

Offsets (Advanced)

In some cases, you may want to “shift” a grid item to the right for spacing or emphasis. Offsets allow you to do this by moving an item over by one or more columns.

For example, Offset +1 on a one-third item moves it one column to the right.
Ask your developer if offset helpers are available in your setup, since they may not appear directly in the block panel.

Examples

Two-Column Layout:
Add two Grid Items, both set to 1/2.
Sidebar Layout:
Add one Grid Item as 2/3 (main content) and another as 1/3 (sidebar).
Four-Card Layout:
Add four Grid Items, all set to 1/4.
Mobile-Friendly Feature Blocks:
Add three Grid Items, each set to Full → 1/3. They stack on mobile but sit side-by-side on desktop.

Quick Reference

Grid wrapper class: Matchbox Grid System
Grid columns: 12 on desktop, 6 on mobile
Common spans:
- 1/2 → half width (6 of 12 on desktop)
- 1/3 → one third (4 of 12 on desktop)
- 2/3 → two thirds (8 of 12 on desktop)
- 1/4 → one quarter (3 of 12 on desktop)
- “Full →” spans expand to full width on smaller screens

In practice: Insert a Grid wrapper → add Grid Items → apply span styles. That’s it. Your layout will adapt across devices automatically.