Canvas ships with a flexible twelve-column grid that adapts to any screen size with ease. Drop content into full-width rows for hero sections, long-form articles, or media galleries, then split the same row into halves, thirds, and quarters wherever you need more structure. Each column gutter, breakpoint, and offset is fully customizable, so you can craft balanced page layouts that stay perfectly aligned from large desktops down to small mobile devices.
Half Width
Two equal half-width columns sit side by side on larger screens and stack neatly on smaller ones. Use this balanced split to pair an image with descriptive text, list features beside benefits, or compare two related options.
Half Width
The half-width column is ideal for placing a heading and supporting paragraph next to a complementary block. Content reflows automatically at each breakpoint, keeping both sides readable without any extra configuration on your part.
2/3 Width
The two-thirds column gives long-form content room to breathe while leaving a sidebar space alongside it. Place primary articles, detailed product descriptions, or rich editorial copy in this wider column to keep readers focused on what matters most. Paired with a one-third column, it forms a classic content-plus-sidebar layout that remains responsive, collapsing into a single stacked column on smaller screens for comfortable mobile reading throughout.
1/3 Width
The one-third column works perfectly as a sidebar beside wider content. Use it for quick links, highlighted callouts, author details, or a compact set of related items that support the main column without competing for attention.
1/4 Width
Quarter-width columns let you display four compact blocks in a single row, perfect for feature icons, short stats, or a tidy set of small navigation links.
3/4 Width
The three-quarter column dominates the row while still leaving a slim sidebar beside it. This generous width suits showcase sections, image-heavy stories, and detailed feature breakdowns that benefit from extra horizontal space. The grid keeps everything aligned to consistent gutters, and the adjacent quarter column is ideal for tags, metadata, or a short call to action. On smaller devices the two columns stack gracefully into a clean, fully readable single-column flow.
