🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

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.

Class Description
.max-width-xxxxs set max-width equal to 20rem (~320px)
.max-width-xxxs set max-width equal to 26rem (~416px)
.max-width-xxs set max-width equal to 32rem (~512px)
.max-width-xs set max-width equal to 38rem (~608px)
.max-width-sm set max-width equal to 48rem (~768px)
.max-width-md set max-width equal to 64rem (~1024px)
.max-width-lg set max-width equal to 80rem (~1280px)
.max-width-xl set max-width equal to 90rem (~1440px)
.max-width-xxl set max-width equal to 100rem (~1600px)
.max-width-xxxl set max-width equal to 120rem (~1920px)
.max-width-xxxxl set max-width equal to 150rem (~2400px)
.max-width-100% set max-width equal to 100%

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

Class Description
.max-width-adaptive-sm set max-width equal to 512px by default, and 768px at breakpoint sm
.max-width-adaptive-md set max-width equal to 512px by default, 768px at breakpoint sm, and 1024px at breakpoint md
.max-width-adaptive-lg set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, and 1280px at breakpoint lg
.max-width-adaptive-xl set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, 1280px at breakpoint lg, and 1440px at breakpoint xl

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):

Class Description
.gap-xxxxs set gap equal to var(--space-xxxxs)
.gap-xxxs set gap equal to var(--space-xxxs)
.gap-xxs set gap equal to var(--space-xxs)
.gap-xs set gap equal to var(--space-xs)
.gap-sm set gap equal to var(--space-sm)
.gap-md set gap equal to var(--space-md)
.gap-lg set gap equal to var(--space-lg)
.gap-xl set gap equal to var(--space-xl)
.gap-xxl set gap equal to var(--space-xxl)
.gap-xxxl set gap equal to var(--space-xxxl)
.gap-xxxxl set gap equal to var(--space-xxxxl)
.gap-0 set gap equal to 0px

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!

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us