Grid & Layout

The _grid-layout.scss file contains a set of classes related to positioning and layout rules.

Defining the grid means creating the system to structure your content, whether it’s a single component or a page layout.

The Container wrapper #

The .container class is used to set the max-width of the content and center it horizontally. The Container utility classes set different max-width values.

:root {
    --container-width-xs: 37.5rem;
    --container-width-sm: 45rem;
    --container-width-md: 64rem;
    --container-width-lg: 80rem;
    --container-width-xl: 90rem;
}

/* classes used to center content on x-axis and set content max width */
.container {
    width: calc(100% - 2*var(--component-padding));
    margin-left: auto;
    margin-right: auto;
}

.container--full-width {
    width: 100%;
}

.container--xs {
    max-width: var(--container-width-xs);
}

.container--sm {
    max-width: var(--container-width-sm);
}

.container--md {
    max-width: var(--container-width-md);
}

.container--lg {
    max-width: var(--container-width-lg);
}

.container--xl {
    max-width: var(--container-width-xl);
}

The reason why we subtract the --component-padding variable from the .container width is to ensure the content is always aligned at the edges of the pages.

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:

CSS Grid and Flexbox #

On a component level, we generally rely on plain CSS Grid Layout and Flexbox for creating layouts and aligning items.

We do provide a CSS Grid fallback in the form of a mixin. Here's an example of how to use CSS Grid together with our mixin 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!

Grid utility classes #

The framework includes a set of utility classes (based on Flexbox) that can be used to create responsive grids. This system is optional, meaning you can use it if you prefer it compared to the CSS Grid and Flexbox syntax.

Here's an example of how to use the grid utility classes:

This system is pretty straightforward: the .grid class is used to target the grid container, then the .col--x classes are applied to the grid items to set the number of columns occupied. If no .col--x value is set, the element default width is 100%.

The .grid-gap--xy classes are used to set the gap.

If you want to change the number of columns occupied by a grid item at a specific media query, you can use the .col--sm-x, .col--md-x, .col--lg-x and .col--xl-x classes to do so.

Here's an example (resize the window to see the responsive changes):

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.