Grid CSS classes

Grid System

CodyFrame includes a powerful grid system for building responsive layouts. The .grid class is used to target the grid container and the .col-{number} classes are applied to the grid items to set the number of columns occupied.

By default, the grid is composed of 12 columns. You can modify the number of columns by updating the $grid-columns SCSS variable:

$grid-columns: 12;
@import 'base';
@import 'custom-style';

If you don’t apply a .col-{size} class to a grid item, it takes the whole width of the grid.

.col → expandable item

If you want to automatically adjust the width of your grid items so that they all have equal widths, you can use the .col class. This class is also useful if you want a grid item to automatically take all the (remaining) available space in a row.

.col-content → item width depends on its content

If you want a grid item width to be determined by its content (as opposed to occupying a specific number of columns), use .col-content class.

Responsive modifiers

Use the .col-{number}@{breakpoint}, .col@{breakpoint}, and .col-content@{breakpoint} variations to modify the number of columns occupied by a grid item at a specific breakpoint:

Gap

The .gap-{size} classes are used to set the grid gap (default gap is zero):

Use the .gap-{size}@{breakpoint} responsive helpers to modify the grid gap at a specific breakpoint (e.g., gap-md@md).

Offset

To offset a column, use one of the .offset-{numberOfColumns} utility classes:

Use the .offset-{numberOfColumns}@{breakpoint} variations to modify the offset of a grid item at a specific breakpoint (e.g., offset-1@md).

⚠️ The offset utility classes work only in modern browsers.