3 columns on desktop, 2 on tablet, full width on mobile
.col is intentionally a plain grid child with no flex behaviour by default.
This means it works cleanly for any content — text, images, plugin output —
without imposing layout assumptions.
When you need flex behaviour (equal-height cards, stretched wrappers),
add the .col-flex modifier:
PLAIN column — text, images, simple content:
Title
Some text. No wrapper needed.
FLEX column — cards, wrappers that need to stretch to full height:
MIXED — one col plain, one col flex (e.g. sidebar + card area):
Card that stretches to match sidebar height.
*/
.col,
[class*="col-"],
[class*="md-"],
[class*="lg-"],
[class*="sm-"] {
grid-column: span var(--col-span, 12);
}
/* Desktop — default, no media query needed (1024px+) */
.lg-2 {
--col-span: 6;
}
.lg-3 {
--col-span: 4;
}
.lg-4 {
--col-span: 3;
}
.lg-6 {
--col-span: 2;
}
.lg-12 {
--col-span: 1;
}
/* Grid Overrides for 5 and 10 columns */
/* Use like this:
1/5th width
1/5th width
1/5th width
1/5th width
1/5th width
*/
.row-5 {
--row-cols: 5;
}
.row-10 {
--row-cols: 10;
}
/* Auto-span children to 1 track when in a custom grid */
.row-5 > *,
.row-10 > * {
--col-span: 1;
}
/* --- Fixed Column Rows for Nested Contexts --- */
/* Use when you need a fixed number of equal columns inside a constrained
parent (e.g. inside a .col of an asymmetric row).
Unlike lg- classes, these divide whatever space is available — no
12-column math, no container-width assumptions.
Use them like this:
Icon 1
Icon 2
Icon 3
WHEN TO USE WHICH:
row-cols-* → nested columns, sidebars, any constrained width context
row-auto-* → full .container width only (uses container-width math)
lg- / md- → full .container width rows only
*/
.row-cols-2 {
--row-cols: 2;
}
.row-cols-3 {
--row-cols: 3;
}
.row-cols-4 {
--row-cols: 4;
}
.row-cols-6 {
--row-cols: 6;
}
/* Reset col-span so children don't try to span 12 tracks */
.row-cols-2 > *,
.row-cols-3 > *,
.row-cols-4 > *,
.row-cols-6 > * {
--col-span: 1;
}
/* Tablet (max 1023px) — portrait tablets, landscape phones */
@media (max-width: 1023px) {
.md-2 {
--col-span: 6;
}
.md-3 {
--col-span: 4;
}
.md-4 {
--col-span: 3;
}
.md-6 {
--col-span: 2;
}
.md-12 {
--col-span: 1;
}
}
/* Mobile (max 767px) — all phones */
@media (max-width: 767px) {
/* Everything stacks full width first */
.col,
[class*="col-"],
[class*="md-"],
[class*="lg-"] {
--col-span: 12;
}
/* sm- classes override the reset above for intentional mobile spans */
.sm-2 {
--col-span: 6;
}
.sm-3 {
--col-span: 4;
}
}
/* Opt-in flex column — add .col-flex when you need:
- Equal-height cards across a row
- A .wrapper inside the col to stretch to full column height
- A CTA button pinned to the bottom of a card (use margin-top: auto on the button) */
.col-flex {
display: flex;
flex-direction: column;
}
/* --- The Stack (Vertical Content Rhythm) --- */
/*
.stack arranges its children vertically with consistent spacing.
Use it inside a .col when you need to control the internal layout
of the column's content — spacing between a heading, text, and a button.
Two variables you can override contextually:
--stack-gap spacing between children (default: --space-m)
--stack-align horizontal alignment (default: flex-start)
ALIGN OPTIONS:
flex-start → children sit at their natural width, left-aligned (default)
stretch → children fill full width (use for inputs, full-width buttons)
center → children centered horizontally
flex-end → children right-aligned
BASIC — default gap, children natural width:
*/
.stack {
display: flex;
flex-direction: column;
width: 100%;
gap: var(--stack-gap, var(--space-xxs));
align-items: var(--stack-align, flex-start);
}
/* --- The Wrapper (The Styling Zone) --- */
/*
.wrapper is the content styling zone inside a .col-flex.
It stretches to fill the full column height, making it the right
place to add backgrounds, borders, padding, and border-radius.
NOTE: .wrapper requires .col-flex on the parent .col to stretch correctly.
Without .col-flex, flex: 1 has nothing to grow into.
Example — card with CTA pinned to bottom: