Grid

CSS Vars Framework has a mobile-first flexbox grid, twelve column system.

Equal-width columns

Create a div and add the class row.
Inside this div, create divisions and add the class col — each one takes an equal share of the row automatically, however many you add.

1 of 3 .col

2 of 3 .col

3 of 3 .col

Note .col with no number always splits the row evenly between however many columns you add — add a fourth .col and all four become 25% wide automatically.

Content-sized column

Add the class col-auto instead of col when a column should only be as wide as its content — the remaining .col siblings share whatever space is left.

col-auto

.col — takes the rest of the row

Setting columns width

add col- with a number from 1 to 12 to set the size

1 of 2 .col-8

2 of 2 .col-4

Setting columns different width for different devices

Use col-sm- col-md- col-lg- col-xl- with any number from 1 to 12

The sum in each row must be 12,

-12 will make a single column
-6 -6 a row of two equal columns
-3 -6 -3 a row of three columns not equal in size

Example:
col-sm-12 shows a full width column on small devices, col-md-6 shows 2 columns on tablets, col-lg-3 shows 4 columns on desktop
Please, resize the window to see the changes on all devices.

1 of 4 col-sm-12 col-md-6 col-lg-3

2 of 4 col-sm-12 col-md-6 col-lg-3

3 of 4 col-sm-12 col-md-6 col-lg-3

4 of 4 col-sm-12 col-md-6 col-lg-3

Note not every step from 1–12 exists at every breakpoint. col-sm- only has 4, 6, 8, and 12. col-md- has every step except 1 and 11. col-lg- and col-xl- have the full 1–12 range. Stick to col-lg-/col-xl- if you need an exact fraction like a third or a fifth.

Nesting columns

Start a new row inside any col to build a sub-grid — the nested row's own 12 columns are relative to the width of the column it's inside, not the page.

col-lg-8

nested col-6

col-lg-4

Reorder columns on different devices

In some cases we need to show a column first on large devices but last on small devices or visa versa

lg-order-first will show a column first on large devices
lg-order-last will show a column last on large devices

1 of 2 col-sm-12 col-lg-8

1 of 2 first on large devices 2nd on small devices

Note lg-order-first and lg-order-last are the only reorder classes in the framework — there's no sm-order-*, md-order-*, or xl-order-* equivalent. Reordering only kicks in at the 992px breakpoint and up.

Relative Width and Height

Add the class w-25 w-50 w-75 w-100 to set the width of any div based on the user view
Add the class h-25 h-50 h-75 h-100 to set the height of any div based on the user view

Note these classes could be applied to any element

Gap

Add classes gap, gap-1, gap-2, gap-3, gap-4 to set the gap between columns, No row break when using with the class row.

1 of 4 col-sm-12 col-md-6 col-lg-3

2 of 4 col-sm-12 col-md-6 col-lg-3

3 of 4 col-sm-12 col-md-6 col-lg-3

4 of 4 col-sm-12 col-md-6 col-lg-3

You can also use flex-nowrap to prevent wrapping of columns in a row, which is useful when you want to create a horizontal scrollable area with multiple columns.

1 of 2 col-6

2 of 2 col-6

Child padding

Add classes child-padding, child-padding-1, child-padding-2, child-padding-3, child-padding-4 to the row to set padding on every column inside it, instead of adding padding to each column one by one

1 of 4 col-sm-12 col-md-6 col-lg-3

2 of 4 col-sm-12 col-md-6 col-lg-3

3 of 4 col-sm-12 col-md-6 col-lg-3

4 of 4 col-sm-12 col-md-6 col-lg-3

Wrapping the grid

A row should sit inside a container so it has a page-width to divide up — use container for a boxed, max-width page, container-fluid for edge-to-edge, or container-half-fluid for full width that caps at 85% on very large screens.

← Previous Next →