<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>"
}
//
// 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;
}
}
The grid component is a wrapper element that forces its inner content into a column/row grid.
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.
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).
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.
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.
There is no grid specific javascript included.