<div id="example-grid--start" class="cwf-grid cwf-grid--5-columns">
    <div class="cwf-card cwf-grid__column--span-2 cwf-card--accent  cwf-grid__column--start-1">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>Card starting at column 1</h4>
                <p>...</p>
            </div>
        </div>
    </div>
    <div class="cwf-card cwf-grid__column--span-2  cwf-card--gray cwf-grid__column--start-2">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>Card starting at column 2</h4>
                <p>...</p>
            </div>
        </div>
    </div>
    <div class="cwf-card cwf-grid__column--span-2 cwf-card--accent  cwf-grid__column--start-3">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>Card starting at column 3</h4>
                <p>...</p>
            </div>
        </div>
    </div>
    <div class="cwf-card cwf-grid__column--span-2   cwf-grid__column--start-4">
        <div class="cwf-card__container">
            <div class="cwf-card__body">
                <h4>Card starting at column 4</h4>
                <p>...</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--start",
  "columns": 5,
  "content": "<div class=\"cwf-card cwf-grid__column--span-2 cwf-card--accent  cwf-grid__column--start-1\">\n        <div class=\"cwf-card__container\">\n            <div class=\"cwf-card__body\">\n                <h4>Card starting at column 1</h4>\n                <p>...</p>\n            </div>\n        </div>\n    </div><div class=\"cwf-card cwf-grid__column--span-2  cwf-card--gray cwf-grid__column--start-2\">\n        <div class=\"cwf-card__container\">\n            <div class=\"cwf-card__body\">\n                <h4>Card starting at column 2</h4>\n                <p>...</p>\n            </div>\n        </div>\n    </div><div class=\"cwf-card cwf-grid__column--span-2 cwf-card--accent  cwf-grid__column--start-3\">\n        <div class=\"cwf-card__container\">\n            <div class=\"cwf-card__body\">\n                <h4>Card starting at column 3</h4>\n                <p>...</p>\n            </div>\n        </div>\n    </div><div class=\"cwf-card cwf-grid__column--span-2   cwf-grid__column--start-4\">\n        <div class=\"cwf-card__container\">\n            <div class=\"cwf-card__body\">\n                <h4>Card starting at column 4</h4>\n                <p>...</p>\n            </div>\n        </div>\n    </div>"
}
  • Content:
    //
    // Grid component styles
    //
    
    // ---- Modules ----
    
    @use "../../shared/media";
    @use "../../shared/style";
    @use "../../shared/theme";
    @use "sass:math";
    
    // Selector prefix
    $prefix: "cwf" !default;
    
    // ---- Grid system ----
    
    // Automatic grid properties
    $display: grid !default;
    $gap: 1rem !default;
    $columns: 5 !default;
    $margin-bottom: 1rem !default;
    $gap--max: $gap * ($columns - 1) !default; // Calculates the max amount of gaps
    $available-space: calc(
        100% - var(--cwf-grid--gap--max)
    ) !default; // Calculates the available space for columns
    $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-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !default;
    $grid-template-columns--md: repeat(
        auto-fit,
        minmax(var(--cwf-grid__column--min-width), 1fr)
    ) !default;
    
    .#{$prefix}-grid {
        --cwf-grid--display: #{$display};
        --cwf-grid--gap: #{$gap};
        --cwf-grid--margin-bottom: #{$margin-bottom};
        --cwf-grid--gap--max: #{$gap--max};
        --cwf-grid--available-space: #{$available-space};
        --cwf-grid--columns: #{$columns};
        --cwf-grid__column--min-width: #{$column__min-width};
        --cwf-grid--grid-template-columns: #{$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-template-columns--md};
        }
    
        & > * {
            margin-bottom: 0 !important;
        }
    }
    
    // Explicit grid column template
    $grid-template-columns--n-columns: repeat(
        var(--cwf-grid--columns),
        1fr
    ) !default;
    
    @for $count from 2 through $columns {
        .#{$prefix}-grid--#{$count}-columns {
            @include media.breakpoint {
                --cwf-grid--columns: #{$count};
                --cwf-grid--grid-template-columns: #{$grid-template-columns--n-columns};
            }
        }
    }
    
    // Column
    .#{$prefix}-grid__column {
        // Explicit column spanning
        @for $count from 2 through $columns {
            &--span-#{$count} {
                @include media.breakpoint {
                    grid-column-end: span $count;
                }
            }
        }
    
        // Full-width column spanning
        &--span-all {
            @include media.breakpoint {
                grid-column: 1/-1;
            }
        }
    
        // Explicit column start
        @for $count from 1 through $columns - 1 {
            &--start-#{$count} {
                @include media.breakpoint {
                    grid-column-start: $count;
                }
            }
        }
    }
    
    // ---- Page layout ----
    
    // Page layout grid, side columns
    $column--page-layout--sides__max-width: 320px !default;
    $column--page-layout--sides__width: fit-content(
        $column--page-layout--sides__max-width
    ) !default;
    $column--page-layout--sides__content-width: calc(
        #{$column--page-layout--sides__max-width} - #{$gap}
    ) !default;
    
    // Page layout grid, main column
    $column--page-layout--main__max-width: calc(
        #{theme.contain--max-width()} - #{$column--page-layout--sides__max-width}
    ) !default;
    $column--page-layout--main__width: minmax(0, 1fr) !default;
    
    // Page layout grid gap
    $gap--page-layout: 0 !default;
    $flex--page-layout: 1 !default;
    $padding--page-layout: math.div($gap, 2) !default;
    $padding--page-layout--md: $padding--page-layout 0 !default;
    
    // Page layout grid (medium breakpoint)
    $grid-template-columns--page-layout--md: $column--page-layout--sides__width
        $column--page-layout--main__width !default;
    $grid-template-areas--page-layout--md: "subnav main" "subnav sidebar" !default;
    
    // Page layout grid (large breakpoint)
    $grid-template-columns--page-layout--lg: $column--page-layout--sides__width
        $column--page-layout--main__width $column--page-layout--sides__width !default;
    $grid-template-areas--page-layout--lg: "subnav main sidebar" !default;
    
    .#{$prefix}-grid--page-layout {
        --cwf-grid--gap: #{$gap--page-layout};
        --cwf-grid--flex: #{$flex--page-layout};
        --cwf-grid--padding: #{$padding--page-layout};
        padding: var(--cwf-grid--padding);
        flex: var(--cwf-grid--flex);
        @include theme.contain;
    
        @include media.breakpoint {
            --cwf-grid--padding: #{$padding--page-layout--md};
            --cwf-grid--grid-template-columns: #{$grid-template-columns--page-layout--md};
            grid-template-areas: $grid-template-areas--page-layout--md;
        }
    
        @include media.breakpoint("lg") {
            --cwf-grid--grid-template-columns: #{$grid-template-columns--page-layout--lg};
            grid-template-areas: $grid-template-areas--page-layout--lg;
        }
    }
    
    // Page layout grid, column
    $column--page-layout__padding: $padding--page-layout !default;
    $column--page-layout__padding--md: $padding--page-layout $gap !default;
    
    .#{$prefix}-grid__column--page-layout {
        --cwf-grid__column--padding: #{$column--page-layout__padding};
        padding: var(--cwf-grid__column--padding);
    
        @include style.children(margins, last);
    
        @include media.breakpoint {
            --cwf-grid__column--padding: #{$column--page-layout__padding--md};
        }
    }
    
    .#{$prefix}-grid__column--page-layout--subnav {
        @include media.breakpoint {
            grid-area: subnav;
        }
    }
    
    .#{$prefix}-grid__column--page-layout--main {
        @include media.breakpoint {
            grid-area: main;
            width: 100%;
            max-width: $column--page-layout--main__max-width;
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    .#{$prefix}-grid__column--page-layout--sidebar {
        @include media.breakpoint {
            grid-area: sidebar;
        }
    }
    
    .#{$prefix}-grid__column--page-layout--subnav,
    .#{$prefix}-grid__column--page-layout--sidebar {
        & > * {
            min-width: $column--page-layout--sides__content-width;
        }
    }
    
  • URL: /components/raw/grid/_index.scss
  • Filesystem Path: components/grid/_index.scss
  • Size: 5.8 KB

Grid

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

Structure & styles

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.

Wrapping element

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.

Grid items

Column spanning

Items within a grid can be made to span multiple columns by adding a .cwf-grid__column--span-[n] class to them, where [n] is either a digit from 2 through 5 (implying the number of columns to span) or all (spanning the item across all columns). Keep in mind that if you make an item span-all in an automatic grid, it will force the number of columns to be 5.

Column start

Items within a grid can be made to start at a specific column by adding a .cwf-grid__column--start-[n], where [n] is a digit from 1 through 4. Keep in mind that if the targeted column is available in the existing row, it will not push the item to the next row.

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.

T4 implementation

The grid component is not tied to a specific T4 content type. All grid component styles are included in the Compass T4 page layout CSS and is used to generate home and inner webpages of a T4 site.

View graphic versionView graphic versionView graphic version