Grid & Layout

The 📁 base/_grid-layout.scss file contains a set of utility classes related to positioning and layout rules.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

🔍 On this page:

1. Container
2. Max-width
3. Grid System
4. Gap
5. Offset
6. Auto-sized Grid
7. Examples
8. Known issues
9. CSS Grid Layout fallback (mixin)

container Class #

The .container class is used to set the width of the content and center it horizontally.

.container {
  width: calc(100% - 2*var(--component-padding));
  margin-left: auto;
  margin-right: auto;
}

The --component-padding variable is subtracted from the .container width to ensure the content is always aligned at the edges of the page.

Here's an example of how to align the content of a component if 1) there's no background color specified, 2) there's a full-width background-color and 3) there's a background color:

max-width Classes #

The .max-width-{size} classes set the max-width of an element. They're often used in combo with the .container class.

If you want to set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{size} classes (example):

Grid System #

CodyFrame includes a grid system that can be used to create 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.

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}, [email protected]{breakpoint}, and [email protected]{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} variations to modify the grid gap at a specific breakpoint (e.g., [email protected]).

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., [email protected]).

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

Auto-sized Grid #

To take advantage of some CSS Grid powerful features (i.e., the option to auto-determine the number of columns), download the Auto-Sized Grid component and include it in your project.

Examples #

Grid examples.

Distribution #

Use the Flexbox utility classes to edit columns distribution:

Reverse order #

Reverse the order of two columns at a specific breakpoint.

Column breaks #

How to break columns to a new line:

Holy grail #

Basic page layout:

Known issues #

If you apply a background-color to the .grid element, along with a .gap-{size} class, you get an issue due to collapsing margins: the margins of the children affect the background-color, even if they don't affect the layout.

To fix this issue, apply the background-color to a parent of the .grid element.

CSS Grid Layout fallback #

If you use CSS Grid to create a layout, you can use the gridFallback and the column mixins if you wish to provide a fallback for browsers not supporting CSS Grid.

Here's an example of how to use CSS Grid together with our mixins to create a responsive layout:

In the example above (SCSS tab), we use a @support feature query to set the grid settings. The mixin fallback needs to be included before the grid settings, and you can optionally pass the gap value to the mixin.

The grid items only need a span value for the grid-column property. The span value is equal to the number of columns you want the item to stretch. The fallback mixin of the grid items accepts a fraction, or a percentage value, as the argument.

Note: if you're not supporting older browsers (i.e. IE), you can just use the grid properties and forget about the fallbacks. You lucky friend!