Source code
Revision control
Copy as Markdown
Other Tools
/**
* Nova Grid System
*
* Layout structure:
* .container (full grid)
* ├── .sidebar-inline-start (148px - left sidebar for logo/navigation)
* ├── .content (flexible - fills remaining space with 74px columns)
* └── .sidebar-inline-end (148px - right sidebar for mini widgets)
*
* Column width:
* 1 column = 1/4 of an IAB Medium Rectangle (MREC) = 300px ÷ 4 = 75px
*/
:root {
// IAB Medium Rectangle ad unit dimensions
--mrec-width: 300px;
// A card spans exactly 4 columns. Use this as our base unit.
--col-width: calc(var(--mrec-width) / 4);
// Bug 2020983: Enable property to set card height
// --mrec-height: 250px;
// --col-height: calc(var(--mrec-height) / 4);
// Side Columns (.sidebar-inline-start/end) are 2 columns wide each side
--side-col-width: calc(2 * var(--col-width));
// Content area (.content): minimum 4 columns wide, grows to fill remaining space
--content-col-width: minmax(calc((4 * var(--col-width)) + 34px), 1fr);
}
.container {
display: grid;
grid-template-columns: var(--side-col-width) var(--content-col-width) var(--side-col-width);
gap: var(--space-medium);
margin-inline: auto;
}
.content {
container-type: inline-size;
container-name: content-grid;
display: grid;
grid-template-columns: repeat(auto-fill, var(--col-width));
gap: var(--space-medium);
justify-content: center;
// Bug 1967304 - Large number (112px)
padding-block-start: calc(var(--space-large) * 7);
}
.content > * {
grid-column: 1 / -1;
container-type: inline-size;
container-name: component;
}
// Fixed-width columns - always span the specified number
.col-1 {
grid-column: span 1;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.col-4 {
grid-column: span 4;
}
.col-8 {
grid-column: span 8;
}
.col-12 {
grid-column: span 12;
}
.col-18 {
grid-column: span 18;
}
.col-26 {
grid-column: span 26;
}