{"id":1640,"date":"2026-07-28T22:34:00","date_gmt":"2026-07-28T22:34:00","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/columns-grids\/"},"modified":"2026-08-20T18:41:47","modified_gmt":"2026-08-20T18:41:47","slug":"columns-grids","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/columns-grids\/","title":{"rendered":"Columns & Grids"},"content":{"rendered":"\n
\n\n
\n\n
Build responsive layouts with the Canvas column system, where every block adapts fluidly across all breakpoints. Mix full, half, and fractional widths to compose clean, balanced pages without writing a single line of custom CSS. Each column stacks gracefully on smaller screens, keeping your content perfectly readable on phones and tablets while preserving the intended structure on wide desktop displays for a consistently polished, professional result every time.<\/div>\n\n\n\n
Half Width<\/h5>

Split any row into two equal halves to present paired content side by side. This balanced layout works well for feature comparisons, image and text pairings, or simple two-column reading flows.<\/p><\/div>\n\n\n\n

Half Width<\/h5>

Use matching half-width columns to align related blocks evenly across the row. Ideal for showcasing two products, services, or descriptions that deserve equal visual weight on the page side by side.<\/p><\/div>\n\n\n\n

<\/div>\n\n\n\n
2\/3 Width<\/h5>

The two-thirds column gives your primary content plenty of room while leaving comfortable space for a supporting sidebar alongside it. Use it for main articles, detailed product descriptions, or featured sections that need extra width without filling the entire row. The layout reflows neatly on mobile devices, stacking the columns in their natural source order so nothing important gets lost or hidden on smaller screens at any size.<\/p><\/div>\n\n\n\n

1\/3 Width<\/h5>

A one-third column pairs perfectly beside wider content, making it a natural fit for sidebars, callouts, or quick summaries. It keeps secondary information tidy without competing with the main area.<\/p><\/div>\n\n\n\n

<\/div>\n\n\n\n
1\/4 Width<\/h5>

Quarter-width columns are compact yet flexible, ideal for grouping four equal items such as icons, stats, or short feature highlights across a single tidy row.<\/p><\/div>\n\n\n\n

3\/4 Width<\/h5>

The three-quarter column dominates the row, giving your headline content the space it deserves while still leaving room for a slim companion column to its side. Reach for this width when the main message should lead and a secondary element supports rather than competes. As always, the grid collapses cleanly on narrow viewports so reading order stays logical and the layout never feels cramped on phones.<\/p><\/div>\n\n\n\n

<\/div>\n\n\n\n
2\/5 Width<\/h5>

A two-fifths column offers a slightly narrower main block, useful when you want a generous companion area beside it. It balances nicely against a three-fifths partner in the same row.<\/p><\/div>\n\n\n\n

3\/5 Width<\/h5>

The three-fifths column carries the bulk of your page content while pairing with a slimmer two-fifths sidebar. This particular split suits longer text passages that still benefit from a visible supporting element kept close at hand on wider screens.<\/p><\/div>\n\n\n\n

<\/div>\n\n\n\n
1\/5 Width<\/h5>

One-fifth columns let you arrange five equal blocks in a single row, perfect for compact icon sets or feature lists.<\/p><\/div>\n\n\n\n

1\/5 Width<\/h5>

Five evenly sized columns keep tightly grouped items neatly aligned across the row in one clean line.<\/p><\/div>\n\n\n\n

1\/5 Width<\/h5>

Use one-fifth widths to display a clean row of five matching cards, each holding a short title.<\/p><\/div>\n\n\n\n

1\/5 Width<\/h5>

Fifth-width columns suit compact navigation, partner logos, or a tidy strip of feature callouts.<\/p><\/div>\n\n\n\n

1\/5 Width<\/h5>

Arrange five equal one-fifth blocks to present balanced, bite-sized content across the full row.<\/p><\/div>\n\n\n\n

<\/div>\n\n\n\n
1\/6 Width<\/h5>

One-sixth columns are the narrowest preset, ideal for tiny icons or counters.<\/p><\/div>\n\n\n\n

5\/6 Width<\/h5>

The five-sixths column claims nearly the entire row, leaving just a sliver beside it for a compact one-sixth companion. Use this generous width for hero text, wide media, or feature blocks that should command attention while a slim adjacent column carries a small badge or icon. Like every Canvas column, it reflows responsively, so your carefully composed wide layout still stacks cleanly and stays fully readable on the smallest mobile screens too.<\/p><\/div>\n\n<\/div>\n\n\n

<\/i><\/div>\n\n

Bootstrap Grid<\/h3>\n\n\n
\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n

.col-lg-1<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-2<\/p><\/div>\n

.col-lg-2<\/p><\/div>\n

.col-lg-2<\/p><\/div>\n

.col-lg-2<\/p><\/div>\n

.col-lg-2<\/p><\/div>\n

.col-lg-2<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-3<\/p><\/div>\n

.col-lg-3<\/p><\/div>\n

.col-lg-3<\/p><\/div>\n

.col-lg-3<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-4<\/p><\/div>\n

.col-lg-4<\/p><\/div>\n

.col-lg-4<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-5<\/p><\/div>\n

.col-lg-5<\/p><\/div>\n

.col-lg-2<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-6<\/p><\/div>\n

.col-lg-6<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-1<\/p><\/div>\n

.col-lg-11<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-2<\/p><\/div>\n

.col-lg-10<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-3<\/p><\/div>\n

.col-lg-9<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-4<\/p><\/div>\n

.col-lg-8<\/p><\/div>\n<\/div>\n\n\n\n

\n

.col-lg-5<\/p><\/div>\n

.col-lg-7<\/p><\/div>\n<\/div>\n\n<\/div>\n\n\n

\n
\n

Explore more Elements<\/h4>\n<\/div>\n\n
<\/i>
Shop<\/h5><\/a><\/div>
<\/i>
Blog<\/h5><\/a><\/div>
<\/i>
Events<\/h5><\/a><\/div>
<\/i>
Contact Forms<\/h5><\/a><\/div>
<\/i>
Modal onLoad<\/h5><\/a><\/div>
<\/i>
Side Panel<\/h5><\/a><\/div>
<\/i>
Animations<\/h5><\/a><\/div>
<\/i>
Buttons<\/h5><\/a><\/div>
<\/i>
Carousel<\/h5><\/a><\/div>
<\/i>
Clients<\/h5><\/a><\/div>
<\/i>
Columns<\/h5><\/a><\/div>
<\/i>
Counters<\/h5><\/a><\/div>
<\/i>
Read MoreElement<\/span><\/h5><\/a><\/div>
<\/i>
Dividers<\/h5><\/a><\/div>
<\/i>
Icon Boxes<\/h5><\/a><\/div>
<\/i>
Gallery<\/h5><\/a><\/div>
<\/i>
Headings<\/h5><\/a><\/div>
<\/i>
Icon Lists<\/h5><\/a><\/div>
<\/i>
Gradients<\/h5><\/a><\/div>
<\/i>
Lightbox<\/h5><\/a><\/div>
<\/i>
Overlays<\/h5><\/a><\/div>
<\/i>
File Uploads<\/h5><\/a><\/div>
<\/i>
Lists & Cards<\/h5><\/a><\/div>
<\/i>
Maps<\/h5><\/a><\/div>
<\/i>
Media Embeds<\/h5><\/a><\/div>
<\/i>
Modal Boxes<\/h5><\/a><\/div>
<\/i>
Notifications<\/h5><\/a><\/div>
<\/i>
Navigations<\/h5><\/a><\/div>
<\/i>
Pagination<\/h5><\/a><\/div>
<\/i>
Progress Bars<\/h5><\/a><\/div>
<\/i>
Shape Dividers<\/h5><\/a><\/div>
<\/i>
Pricing<\/h5><\/a><\/div>
<\/i>
Process Steps<\/h5><\/a><\/div>
<\/i>
Promo Boxes<\/h5><\/a><\/div>
<\/i>
Blockquotes<\/h5><\/a><\/div>
<\/i>
Responsive<\/h5><\/a><\/div>
<\/i>
Sections<\/h5><\/a><\/div>
<\/i>
Social Icons<\/h5><\/a><\/div>
<\/i>
Hover Animations<\/h5><\/a><\/div>
<\/i>
Alerts<\/h5><\/a><\/div>
<\/i>
Styled Icons<\/h5><\/a><\/div>
<\/i>
Tables<\/h5><\/a><\/div>
<\/i>
Tabs<\/h5><\/a><\/div>
<\/i>
Testimonials<\/h5><\/a><\/div>
<\/i>
Thumbnails<\/h5><\/a><\/div>
<\/i>
Toggles<\/h5><\/a><\/div>
<\/i>
Lazy Loading<\/h5><\/a><\/div>
<\/i>
Flip Cards<\/h5><\/a><\/div>
<\/i>
Cascading Images<\/h5><\/a><\/div>
<\/i>
Before\/After<\/h5><\/a><\/div>
<\/i>
Video Facade<\/h5><\/a><\/div>
<\/i>
GDPR<\/h5><\/a><\/div>
<\/i>
Cart Quantity<\/h5><\/a><\/div>
<\/i>
Circle Stack<\/h5><\/a><\/div>
<\/i>
Image Sliders<\/h5><\/a><\/div>
<\/i>
Ticker<\/h5><\/a><\/div>
<\/i>
AJAX Button<\/h5><\/a><\/div>
<\/i>
Conditional<\/h5><\/a><\/div>
<\/i>
Code Highlighter<\/h5><\/a><\/div>
<\/i>
Custom Cursor<\/h5><\/a><\/div>
<\/i>
Hover Parallax<\/h5><\/a><\/div>
<\/i>
Mode Switcher<\/h5><\/a><\/div>
<\/i>
Image Hotspots<\/h5><\/a><\/div>
<\/i>
Filters<\/h5><\/a><\/div>