Grid & Layout - v3

• Container
• Grid system
• Gap
• Offset
• Auto-sized grid
• Examples

Learn how to use the grid system in CodyFrame v3.

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' as * 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}, .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):

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 gap-md@md gap-y-xl@lg">
  <!-- ... -->
</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., offset-1@md).

Use the .offset-0@{breakpoint} class to reset the offset at a specific breakpoint (e.g., offset-0@md).

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: