Due to COVID-19, we're receiving a larger than usual amount of requests resulting in longer wait periods for support.

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.

https://codepen.io/codyhouse/embed/orvKEq/?height=265&theme-id=35198&default-tab=html,result

.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.

https://codepen.io/codyhouse/embed/ad1dd1da3df2cc9ca6b896b3e7f7347b/?height=265&theme-id=35198&default-tab=html,result

.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.

https://codepen.io/codyhouse/embed/06ae2f227a22519643b01a090350ae86/?height=265&theme-id=35198&default-tab=html,result

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:

https://codepen.io/codyhouse/embed/jQexYM/?height=265&theme-id=35198&default-tab=html,result

Gap

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

ClassDescription
.gap-xxxxsset gap equal to var(–space-xxxxs)
.gap-xxxsset gap equal to var(–space-xxxs)
.gap-xxsset gap equal to var(–space-xxs)
.gap-xsset gap equal to var(–space-xs)
.gap-smset gap equal to var(–space-sm)
.gap-mdset gap equal to var(–space-md)
.gap-lgset gap equal to var(–space-lg)
.gap-xlset gap equal to var(–space-xl)
.gap-xxlset gap equal to var(–space-xxl)
.gap-xxxlset gap equal to var(–space-xxxl)
.gap-xxxxlset gap equal to var(–space-xxxxl)
.gap-0set gap equal to 0px

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:

https://codepen.io/codyhouse/embed/XWJeJNX/?height=265&theme-id=35198&default-tab=html,result

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

War dieser Artikel hilfreich?
JaNein