Grid & Layout

• Container
• Grid System
• Gap
• Offset
• Auto-Sized Grid
• Examples
• Known Issues
• CSS Grid Layout Mixin (CodyFrame v2)

Learn how to use CodyFrame's grid system.

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 wrapper 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 in the style.scss file:

@use 'base' with (
  $breakpoints: (
    'xs': 32rem,
    'sm': 48rem,
    'md': 64rem,
    'lg': 80rem,
    'xl': 90rem
  ),
  $grid-columns: 12 // 👈
);

Starting from CodyFrame v3, you can also modify the number of columns on a component level using the .grid-col-{numberOfColumns} utility classes. 

Example:

<div class="grid grid-col-5">
  <!-- 👆 you're creating a grid with 5 columns -->
</div>

Use the .col-{size} classes to set the number of columns occupied by each grid item. If you don't apply a .col-{size} class, the grid item occupies the whole grid width.

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

Optionally, you can create custom gap utility classes in the 'custom-style/_util.scss' file:

// create a 4px gap util class
.gap-4 { --gap-x: 4px; --gap-y: 4px; > * { --sub-gap-x: 4px; --sub-gap-y: 4px; }}

@each $breakpoint, $value in $breakpoints { // responsive variations
  @include breakpoint(#{$breakpoint}) {
    .gap-4\@#{$breakpoint} { --gap-x: 4px; --gap-y: 4px; > * { --sub-gap-x: 4px; --sub-gap-y: 4px; }}
  }
}

// create a 20px vertical gap-y util class
.gap-y-20 { --gap-y: 20px; > * { --sub-gap-y: 20px; }}

@each $breakpoint, $value in $breakpoints {  // responsive variations
  @include breakpoint(#{$breakpoint}) {
    .gap-y-20\@#{$breakpoint} { --gap-y: 20px; > * { --sub-gap-y: 20px; }}
  }
}

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

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 #

How to nest grid elements:

Distribution #

Because the .grid element is a flex container, you can use the flexbox utility classes:

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 change the space unit (e.g., from Rem to Em units using the .space-unit-em utility class) on the direct child of a .grid element, you'll break the grid.

Examples:

• Don't apply a .col class to a .text-component (where the --space-unit: 1em).
• Don't apply a .col class to an element with the .space-unit-em utility class. 

<!-- ❌ don't -->
<ul class="grid gap-sm">
  <li class="col-6">
    <!-- ... -->
  </li>

  <li class="col-6 text-component">
    <h1>Text Component</h1>
    <p>Lorem ipsum dolor sit.</p>
  </li>
</ul>

<!-- ✅ do -->
<ul class="grid gap-sm">
  <li class="col-6">
    <!-- ... -->
  </li>

  <li class="col-6">
    <div class="text-component">
      <h1>Text Component</h1>
      <p>Lorem ipsum dolor sit.</p>
    </div>
  </li>
</ul>

CSS Grid Layout Fallback (CodyFrame v2) #

Note: this mixin is no longer supported starting from CodyFrame v3.

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.