Grid Framework
Audience: Site Builder.
ContentBox (the engine behind PageCraft) is CSS-framework agnostic — it can drive its own native column grid, or a third-party framework's grid like Bootstrap or Tailwind CSS. The Grid Framework setting tells the editor which one to use, so that imported templates built in that framework get real column tooling (select, move, resize) on their own grid classes instead of being forced into ContentBox's native .column grid.
Set it under Add-Ons → PageCraft → Global Settings → Grid Framework, or override it per field on the field's settings (leave a field on "Use global setting" to inherit).
The three options
| Setting | ContentBox drives… | Use when |
|---|---|---|
| Native (default) | Its own .column grid (.column.half, .column.third, …) |
You build pages from PageCraft's bundled blocks or native sections. |
| Bootstrap | Bootstrap's col-* grid (col-md-6, etc.) |
Your sections/templates are authored in Bootstrap (most ThemeForest or marketplace templates). |
| Tailwind CSS | Tailwind's w-*/12 grid |
Your sections/templates are authored in Tailwind. |
Default is Native, so existing sites are unchanged until you opt in.
What "drives the grid" means
When the framework matches your section markup, the editor's column tools operate on that framework's classes directly:
- Selecting a column highlights the real col-md-6 (or w-6/12) cell.
- Dragging the resize handle swaps the class (col-md-6 → col-md-4) — the framework's own CSS does the layout, so it looks identical in the editor and on the front end.
- No class-name collision: PageCraft no longer has to inject compatibility CSS to stop ContentBox's native .row/.column rules from fighting the framework's grid.
Important: the framework is canvas-wide
Selecting a framework switches the whole editor canvas to that grid vocabulary — it is not a per-section choice. ContentBox converts every column in the canvas to the selected framework's classes. This has two consequences worth understanding before you switch:
- Native sections get converted. If you switch a page that contains native .column sections to Bootstrap, ContentBox rewrites those columns to col-md-*. The conversion measures each column's width and rounds to the nearest grid unit, which is not always lossless for layouts that weren't built on a 12-column grid (e.g. an auto-fill row of four equal columns can round to four col-md-4 = 16 units and overflow). PageCraft includes a repair pass that catches the common overflow case and falls the columns back to auto-equal (col / md:flex-1), but the safest rule is: don't mix native and framework sections on the same page.
- Pick the framework that matches your content. The setting is most useful when a page is built entirely in one framework — which is the normal case for an imported template (a Bootstrap template is all Bootstrap; a Tailwind template is all Tailwind).
Recommended workflow
- All-native site → leave Grid Framework on Native. Everything works as before; no conversion ever happens.
- All-framework site (you import Bootstrap or Tailwind templates and build from those) → set Grid Framework to match. Imported columns get full native tooling.
- Mixed site → use the per-field override so a Bootstrap-built field and a native field live on different channels/fields, not the same page. To add a native section to a framework page, you can temporarily switch the field to Native, add the section, then switch back — the canvas content stays as-is per framework; the conversion only runs while a framework is active.
Tailwind note: Tailwind builds purge unused utility classes, so a class the editor generates may not exist in your compiled CSS. For Tailwind, always build pages from sections that were authored in Tailwind (so every class is already in your build) rather than relying on conversion from native.
How it relates to the grid-compat CSS
On the front end, PageCraft still ships a small Bootstrap grid-compatibility stylesheet (ThemeAssets::gridCompatCss) that keeps imported col-* / row-cols-* grids laying out correctly regardless of the Grid Framework setting. That CSS is scoped to real Bootstrap column tokens only, so it never touches native ContentBox .column sections. You don't need to configure it — it's automatic.
Reference
- Setting storage: framework key in exp_pagecraft_settings (global) / field settings (per-field)
- Canvas wiring: Actions/EditorFrame.php (framework: option on the ContentBox init; pcFixGridMath repair pass)
- Front-end CSS: Traits/ThemeAssets.php::gridCompatCss()
- ContentBox presets: bootstrap, tailwind (built into contentbox.min.js)