Canvas ships with a fully responsive twelve-column grid that adapts to any screen size you design for. Drop your content into rows and columns, and the layout reflows automatically across desktops, tablets, and phones. Combine fluid widths with sensible gutters to keep everything aligned, readable, and balanced. Every block below demonstrates a different column ratio so you can preview spacing and proportions before committing to your own production page structure.
Half Width
Use half-width columns to place two equal blocks side by side, ideal for pairing an image with a caption or a feature with its short description. On smaller screens these columns stack neatly to keep your content easy to read.
Half Width
Equal columns share the row evenly, so headings, paragraphs, and buttons line up across both sides without extra effort. Adjust the gutter spacing to give each block room to breathe while keeping the overall layout tidy and consistent.
2/3 Width
A two-thirds column is the natural home for your primary content: long-form articles, detailed product descriptions, or the main body of a landing page. It gives readers a comfortable measure for paragraphs while leaving room beside it for a complementary sidebar. Pair this wider column with a one-third companion to create the classic content-and-aside arrangement that works across blogs, documentation, and marketing pages, all while staying fully responsive on every device your visitors use.
1/3 Width
A one-third column works perfectly as a sidebar for related links, author details, recent updates, or a compact call to action. It keeps secondary information close at hand without competing with the main content alongside it for attention.
1/4 Width
A quarter-width column is great for compact widgets, icons, or short stats that sit neatly together in a tidy four-across row of cards.
3/4 Width
A three-quarter column gives your main content nearly the full width of the row while still reserving a slim strip for a narrow sidebar or quick navigation. It suits dashboards, reading layouts, and feature pages where the central column carries most of the message. Because the grid is fully responsive, this generous width collapses gracefully on smaller screens so nothing feels cramped, ensuring your text stays legible and your structure remains clear from the largest monitor down to the smallest phone display.
