Canvas Grid Section

Columns that place themselves. Canvas Grid Section adds a responsive 12-column grid to Drupal Canvas. You build a page section by adding Columns to it, and each Column decides where it sits: which of the 12 columns it starts on and how many it spans, separately on phones, tablets and desktops.

Check the video

Canvas Grid Section Video

Most layout tools give the section a fixed preset, such as 50/50, 33/33/33 or 66/33, and the content just fills the slots. When a design doesn't match a preset, someone has to create a new one. Canvas Grid Section turns that around: the Section is only the grid, and the Columns describe the layout. Any layout is a combination of Columns, not a new preset.

Features

• Two Canvas components, Section and Column. A Section is a full-width band of the page that holds the grid. Columns go inside it and hold any content.
• Per-viewport placement. Each Column has its own start and span for Mobile, Tablet, Desktop and Large Desktop, set with a visual column picker in the Canvas editor. Stack columns on phones, place them side by side on tablets, give one more room on desktops.
• Any layout without presets. Mix widths, offset or center a Column, or change the visual order per screen size.
• Every Column is a CSS container. Cards, teasers and other components inside a Column can adapt to the Column's width with @container queries rather than the screen's, so the same component works in a wide Column and a narrow one.
• The editor and the live page always agree. The grid switches at your theme's Canvas viewport widths, the same ones the Canvas editor previews.
• Section options: Boxed (centered, limited width) or Edge to Edge, background color or image, the HTML tag (section, header, aside and more), an anchor ID, safe custom attributes such as aria-label, and spacing for the gap, margins and padding.
• One spacing scale. Spacing is chosen in steps from 1 to 5 instead of free values, so every section on the site keeps the same rhythm.
• Theme-friendly. No CSS framework. Widths and spacing are CSS custom properties that any theme can override, including themes built with Tailwind CSS.
• Accessibility built in. Right-to-left languages mirror automatically, decorative backgrounds are hidden from screen readers, and a background color sets color-scheme so a theme can keep text readable on it.
• Usable from code. The same components render from Twig and PHP render arrays, in templates outside Canvas.

Use it when you build landing pages, marketing pages or any page in Canvas that needs columns, and you want editors to arrange content freely without waiting for a developer to add another layout.

Post-Installation

There is no configuration page. After installing:

1. Open a page in the Canvas editor. Section and Column are now in the component library.
2. Insert one of the five patterns the module adds (Two Columns, Three Columns, Four Columns, Content and Sidebar, Sidebar and Content), or add a Section and put Columns in it.
3. Select a Column and set its start and span for each viewport. Switch the editor's preview between viewports to see each layout.

The patterns are starting points made of ordinary Columns, not presets: change any Column and the layout follows. They belong to your site once created, and module updates never change them.

Themers can match the site's design by overriding a few CSS custom properties, such as --cgs-space and --cgs-max-width, and can change the breakpoints in the theme's {theme}.canvas.yml. Clear the cache after changing breakpoints.

Additional Requirements

• Drupal 11.3 or later, on PHP 8.3 or later
• Drupal Canvas 1.11 or later

No external libraries or CSS frameworks are needed.

Recommended modules/libraries

None. The module works with any theme. A theme with its own {theme}.canvas.yml viewports gets a grid that switches at the same widths.

Community Documentation

• README
• Section and Column: every option, with examples
• Theming: spacing, widths and breakpoints
• Using it in code: Twig and render arrays
• Patterns and Accessibility