Canvas ships with a fully responsive twelve-column grid that adapts cleanly to every screen size. Combine columns in any ratio to build flexible page layouts without writing custom CSS, and rely on consistent spacing utilities to keep content aligned. Each column collapses gracefully on smaller devices, stacking in a logical reading order so your message stays clear. Use the examples below to see how different column widths behave together within a standard content row across desktop, tablet and mobile.
Half Width
This block spans half of the available row width on desktop screens. Pair two equal columns side by side to present comparisons, feature highlights or paired media and text, then watch them stack neatly into one column when the viewport narrows.
Half Width
A matching half-width column sits beside its partner to form a balanced two-up layout. It is ideal for splitting related content into clear, readable sections, and it reflows automatically into a full-width stack on smaller mobile devices.
2/3 Width
This wider column occupies two thirds of the row, giving your primary content generous room to breathe while leaving space alongside for a supporting sidebar or callout. The asymmetric split works well for articles, product details and feature descriptions that need a main reading area paired with secondary information. On narrow screens the columns reorder and stack so the leading content always appears first, keeping the experience intuitive for every visitor on any device they happen to use.
1/3 Width
The narrower one-third column complements the wider area beside it, making an ideal home for a sidebar, related links or a short summary. It keeps secondary content visible without crowding the main column, then drops below it on mobile.
1/4 Width
This compact quarter-width column is perfect for small stats, icons or short labels arranged in a tidy four-up row that wraps gracefully on smaller screens.
3/4 Width
This three-quarter column gives your main content the spotlight while reserving a slim companion area for navigation, quick facts or a brief aside. The generous width suits long-form text, detailed product information and rich media that benefit from extra horizontal space. As the viewport shrinks the layout adapts, stacking each column in turn so the dominant content stays first and the reading flow remains natural across phones, tablets and large desktop displays alike.
