Grid & Layout

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

CodyFrame features a powerful grid system powered by flexbox, enabling you to construct any type of layout.

Grid system #

The .grid class targets the grid wrapper, while the .col-{number} classes are applied to the grid items to specify how many columns they occupy.

By default, the grid is composed of 12 columns. In your style.scss, modify the number of columns by adding:

@use 'config' as * with (
  $grid-columns: 18
);

You can also modify the number of columns on a component level using the .grid-col-{number-of-columns} utility classes. 

Example:

<div class="grid grid-col-5">
  <!-- ↑ you've created 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 #

To ensure that all grid items on the same row have equal widths, you can use the .col class. This class is also helpful if you want a grid item to occupy all the remaining space in a row.

.col-content → item width depends on its content #

If you want an item's width to be determined by its content instead of a set number of columns, use the .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:

<ul class="grid gap-sm">
  <li class="col-6@md col-3@lg"></li>
  <li class="col-3@md"></li>
  <!-- ... -->
</ul>

Gap #

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

The gap scale depends on the spacing scale.

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 set off-scale gap values using the --column-gap and --row-gap variables:

<ul class="grid" style="--column-gap: 4px;">
  <!-- ... -->
</ul>

Offset #

To offset a column, use one of the .offset-{number-of-columns} utility classes:

Use the .offset-{number-of-columns}@{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: