Grid & Layout

Learn how to use CodyFrame's grid system.

🔍 On this page:

1. Container
2. Grid System
3. Gap
4. Offset
5. Auto-Sized Grid
6. Examples
7. Known Issues
8. CSS Grid Layout Fallback (mixin)

Container #

The .container class is used to center the content 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 create left/right side margins.

The .container class is often used with the .max-width-{size} utility classes:

If you want to set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{size} utility 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}, [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):

To target only the vertical gaps (i.e., row gap), use the .gap-y-{size} classes:

<ul class="grid gap-y-md">
  <!-- ... -->
</ul>

To target only the horizontal gaps (i.e., column gap), use the .gap-x-{size} classes:

<ul class="grid gap-x-sm">
  <!-- ... -->
</ul>

Use the .gap-{size}@{breakpoint}, .gap-y-{size}@{breakpoint}, and .gap-x-{size}@{breakpoint} responsive helpers to modify the grid gaps at a specific breakpoint:

<ul class="grid gap-sm [email protected] [email protected]">
  <!-- ... -->
</ul>

Alternatively, you can set the gap by specifying a custom value for the --gap, --gap-y, and --gap-x variables:

<!-- 👇 Example 1 - setting the gap variable inline -->
<ul class="grid" style="--gap: 8px;">
  <!-- ... -->
</ul>

<!-- 👇 Example 2 - setting the gap variable in CSS -->
<ul class="my-custom-grid grid">
  <!-- ... -->
</ul>

<style>
  .my-custom-grid {
    --gap: 8px;
  }
</style>

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

Use the [email protected]{breakpoint} class to reset the offset 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.

Nesting #

Grid infinite nesting:

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 and the .clearfix class to the parent of the .grid element.

CSS Grid Layout fallback #

If you use CSS Grid Layout in your CSS, you can use the gridFallback and the column mixins if you wish to provide a fallback for browsers not supporting it.

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!