<div id="example-grid--automatic" class="cwf-grid">
    <div class="cwf-card">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>
                    Default card
                </h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a
                    mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna
                    facilisis neque, eget tempor urna diam nec sem.
                </p>
            </div>
        </div>
    </div>
    <div class="cwf-card cwf-card--accent">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>
                    Accent card
                </h4>
                <p>
                    Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium.
                    Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra
                    lectus luctus, laoreet massa at, consectetur libero.
                </p>
            </div>
        </div>
    </div>
    <div class="cwf-card">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>
                    Default card
                </h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a
                    mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna
                    facilisis neque, eget tempor urna diam nec sem.
                </p>
            </div>
        </div>
    </div>
    <div class="cwf-card cwf-card--accent">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>
                    Accent card
                </h4>
                <p>
                    Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium.
                    Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra
                    lectus luctus, laoreet massa at, consectetur libero.
                </p>
            </div>
        </div>
    </div>
</div>
{% set classes = ['cwf-grid'] %}

{% if columns %}
    {% set classes = classes|merge(['cwf-grid--' ~ columns ~ '-columns']) %}
{% endif %}

<div {{ id ? ' id="' ~ id ~ '"' }} class="{{ classes|join(' ') }}">
    {{ content }}
</div>
{
  "id": "example-grid--automatic",
  "content": "<div class=\"cwf-card\">\n    <div class=\"cwf-card__container\">\n        <div class=\"cwf-card__body\">\n            <h4>\n    Default card\n</h4>\n<p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a\n    mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna\n    facilisis neque, eget tempor urna diam nec sem.\n</p>\n        </div>\n    </div>\n</div><div class=\"cwf-card cwf-card--accent\">\n    <div class=\"cwf-card__container\">\n        <div class=\"cwf-card__body\">\n            <h4>\n    Accent card\n</h4>\n<p>\n    Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium.\n    Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra\n    lectus luctus, laoreet massa at, consectetur libero.\n</p>\n        </div>\n    </div>\n</div><div class=\"cwf-card\">\n    <div class=\"cwf-card__container\">\n        <div class=\"cwf-card__body\">\n            <h4>\n    Default card\n</h4>\n<p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a\n    mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna\n    facilisis neque, eget tempor urna diam nec sem.\n</p>\n        </div>\n    </div>\n</div><div class=\"cwf-card cwf-card--accent\">\n    <div class=\"cwf-card__container\">\n        <div class=\"cwf-card__body\">\n            <h4>\n    Accent card\n</h4>\n<p>\n    Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium.\n    Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra\n    lectus luctus, laoreet massa at, consectetur libero.\n</p>\n        </div>\n    </div>\n</div>"
}
  • Content:
    //
    // Grid component styles
    //
    
    // ---- Modules ----
    
    @import "../../shared/media";
    @import "../../shared/theme";
    
    // ---- Grid system ----
    
    // Automatic grid properties
    $grid--display: grid !default;
    $grid--gap: 1rem !default;
    $grid--columns: 5 !default;
    $grid--margin-bottom: 1rem !default;
    $grid--gap--max: $grid--gap * ($grid--columns - 1) !default; // Calculates the max amount of gaps
    $grid--available-space: calc(
        100% - var(--cwf-grid--gap--max)
    ) !default; // Calculates the available space for columns
    $grid__column--min-width: calc(
        var(--cwf-grid--available-space) / var(--cwf-grid--columns)
    ) !default; // Calculates the min width of columns
    
    // Automatic grid column templates
    $grid--grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !default;
    $grid--md--grid-template-columns: repeat(
        auto-fit,
        minmax(var(--cwf-grid__column--min-width), 1fr)
    ) !default;
    
    .cwf-grid {
        --cwf-grid--display: #{$grid--display};
        --cwf-grid--gap: #{$grid--gap};
        --cwf-grid--margin-bottom: #{$grid--margin-bottom};
        --cwf-grid--gap--max: #{$grid--gap--max};
        --cwf-grid--available-space: #{$grid--available-space};
        --cwf-grid--columns: #{$grid--columns};
        --cwf-grid__column--min-width: #{$grid__column--min-width};
        --cwf-grid--grid-template-columns: #{$grid--grid-template-columns};
        display: var(--cwf-grid--display);
        gap: var(--cwf-grid--gap);
        margin-bottom: var(--cwf-grid--margin-bottom);
        grid-template-columns: var(--cwf-grid--grid-template-columns);
    
        @include media__breakpoint {
            --cwf-grid--grid-template-columns: #{$grid--md--grid-template-columns};
        }
    
        & > * {
            margin-bottom: 0 !important;
        }
    }
    
    // Explicit grid column template
    $cwf-grid--n-columns--grid-template-columns: repeat(
        var(--cwf-grid--columns),
        1fr
    ) !default;
    
    @for $count from 2 through $grid--columns {
        .cwf-grid--#{$count}-columns {
            @include media__breakpoint {
                --cwf-grid--columns: #{$count};
                --cwf-grid--grid-template-columns: #{$cwf-grid--n-columns--grid-template-columns};
            }
        }
    }
    
    // ---- Page layout ----
    
    // Page layout grid, side columns
    $grid__column--page-layout--sides--max-width: 320px !default;
    $grid__column--page-layout--sides--width: fit-content(
        $grid__column--page-layout--sides--max-width
    ) !default;
    $grid__column--page-layout--sides--content-width: calc(
        #{$grid__column--page-layout--sides--max-width} - #{$grid--gap}
    ) !default;
    
    // Page layout grid, main column
    $grid__column--page-layout--main--max-width: calc(
        #{theme__contain--max-width()} - #{$grid__column--page-layout--sides--max-width}
    ) !default;
    $grid__column--page-layout--main--width: 1fr !default;
    
    // Page layout grid gap
    $grid--page-layout--gap: 0 !default;
    $grid--page-layout--flex: 1 !default;
    $grid--page-layout--padding: $grid--gap / 2 !default;
    $grid--page-layout--md--padding: $grid--page-layout--padding 0 !default;
    
    // Page layout grid (medium breakpoint)
    $grid--page-layout--md--grid-template-columns: $grid__column--page-layout--sides--width
        $grid__column--page-layout--main--width !default;
    $grid--page-layout--md--grid-template-areas: "subnav main" "subnav sidebar" !default;
    
    // Page layout grid (large breakpoint)
    $page-layout--lg--grid-template-columns: $grid__column--page-layout--sides--width
        $grid__column--page-layout--main--width
        $grid__column--page-layout--sides--width !default;
    $grid--page-layout--lg--grid-template-areas: "subnav main sidebar" !default;
    
    .cwf-grid--page-layout {
        --cwf-grid--gap: #{$grid--page-layout--gap};
        --cwf-grid--flex: #{$grid--page-layout--flex};
        --cwf-grid--padding: #{$grid--page-layout--padding};
        padding: var(--cwf-grid--padding);
        flex: var(--cwf-grid--flex);
        @include theme__contain;
    
        @include media__breakpoint {
            --cwf-grid--padding: #{$grid--page-layout--md--padding};
            --cwf-grid--grid-template-columns: #{$grid--page-layout--md--grid-template-columns};
            grid-template-areas: $grid--page-layout--md--grid-template-areas;
        }
    
        @include media__breakpoint("lg") {
            --cwf-grid--grid-template-columns: #{$page-layout--lg--grid-template-columns};
            grid-template-areas: $grid--page-layout--lg--grid-template-areas;
        }
    }
    
    // Page layout grid, column
    $grid__column--page-layout--padding: $grid--page-layout--padding !default;
    $grid__column--md--page-layout--padding: $grid--page-layout--padding $grid--gap !default;
    
    .cwf-grid__column--page-layout {
        --cwf-grid__column--padding: #{$grid__column--page-layout--padding};
        padding: var(--cwf-grid__column--padding);
    
        @include style__children(margins, last);
    
        @include media__breakpoint {
            --cwf-grid__column--padding: #{$grid__column--md--page-layout--padding};
        }
    }
    
    .cwf-grid__column--page-layout--subnav {
        @include media__breakpoint {
            grid-area: subnav;
        }
    }
    
    .cwf-grid__column--page-layout--main {
        @include media__breakpoint {
            grid-area: main;
            width: 100%;
            max-width: $grid__column--page-layout--main--max-width;
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    .cwf-grid__column--page-layout--sidebar {
        @include media__breakpoint {
            grid-area: sidebar;
        }
    }
    
    .cwf-grid__column--page-layout--subnav,
    .cwf-grid__column--page-layout--sidebar {
        & > * {
            min-width: $grid__column--page-layout--sides--content-width;
        }
    }
    
  • URL: /components/raw/grid/_index.scss
  • Filesystem Path: components/grid/_index.scss
  • Size: 5.4 KB

Grid

The grid component is a wrapper element that forces its inner content into a column/row grid.

Markup

The grid component can be used by wrapping any content in a .cwf-grid element. On mobile devices up to a viewport width of 1023px, all grids will be one column with its content vertically stacking.

Automatic grid

Wrap any content in a .cwf-grid element, and it will be configured to display in an evenly-sized column grid (up-to 5 columns).

Explicit grid

Add a .cwf-grid--[n]-columns class to a wrapping .cwf-grid element to restrict the number of evenly-sized columns to [n], where [n] is a digit from 2 through 5.

Page layout

The 3-column page layout used on every page of a Compass website is an extension (or modifier) of the grid component. This grid variation utilizes named columns, optional 320px wide side columns for sub-navs and sidebar content, and a main, middle column that takes up as much space as possible up-to 1080px. This grid variation should only be used within the scope of the entire page and not within main content.

Javascript

There is no grid specific javascript included.