Layout Grid

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

1. 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.
2. 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.
3. 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.