Layouts

Layout Utilities

Everything on this page is about arranging elements on the page — containers that set page width, the responsive grid, flexbox layout helpers, and the spacing/flow system that supports them. All classes are pulled straight from cssvars.css.

Doc note: two classes from the source doc aren't in the current stylesheet — .container-narrow isn't defined (only .container, .container-fluid, .container-half-fluid exist), and bare .flow / --layout-flow doesn't exist either — the real equivalent is .page-flow, which reads --page-flow. Demoed below using what's actually in the file.

1. Containers & Grid

The foundation — page-width containers and the 12-column responsive grid everything else sits inside.

Containers

.container / .container-fluid / .container-half-fluid

Commonly used in: .container — marketing pages, blog posts; .container-fluid — dashboards, admin panels, full-bleed sections; .container-half-fluid — galleries or kanban boards that need breathing room on large monitors.

.container — boxed, max-width steps up at each breakpoint
.container-fluid — full width
.container-half-fluid — full width, caps at 85% above 1200px

Page layout — main + side

.row with .col-md-12 .col-lg-8 .col-xl-8 / .col-md-12 .col-lg-4 .col-xl-4

Commonly used in: blog post + related-links sidebar, documentation pages, dashboard main content next to a filters panel, e-commerce category page with filters and product grid.

header
Main col-8
Nested col-6
Nested col-6
Footer

Responsive columns — .col-12 .col-md-6 .col-lg-3

Stack width classes on one element to change it at each breakpoint. Read them as "this wide, until a wider breakpoint kicks in": .col-12 is the mobile default (full width), .col-md-6 takes over at 768px and up, and .col-lg-3 takes over at 992px and up — whichever breakpoint matches the current screen width wins.

Commonly used in: product grids, blog/article card grids, team-member grids, feature grids — anything that should read as 1 column on mobile, 2 on tablet, 4 on desktop.

Card 1
Card 2
Card 3
Card 4

Resize the browser window to see it change — below 768px each card is full width (1 per row); from 768px to 991px they pair up (2 per row); at 992px and above all four sit in one row (4 per row).

Screen widthActive classCard widthCards per row
< 768px (mobile).col-12100%1
768px – 991px (tablet).col-md-650%2
≥ 992px (desktop).col-lg-325%4

Full list of responsive column classes in cssvars.css

Mix any of these on one element — same pattern as the demo above, just more width choices per breakpoint.

  • No prefix — always active, every screen size: .col-1 through .col-12, plus .col and .col-auto
  • .col-sm-* — kicks in at 576px: .col-sm, .col-sm-auto, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-12
  • .col-md-* — kicks in at 768px: .col-md, .col-md-auto, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-12
  • .col-lg-* — kicks in at 992px: .col-lg, .col-lg-auto, .col-lg-1 through .col-lg-12 (full range)
  • .col-xl-* — kicks in at 1200px: .col-xl, .col-xl-auto, .col-xl-1 through .col-xl-12 (full range)

Gaps to know: .col-sm-* only offers 4 / 6 / 8 / 12 (no 1‑3, 5, 7, 9‑11). .col-md-* offers every step except .col-md-1 and .col-md-11. Only .col-lg-* and .col-xl-* have the complete 1–12 range.

2. Flexbox Layout Helpers

One-line flex patterns for arranging a handful of elements without reaching for the grid — centering, spacing, and stacking shorthands used throughout the framework.

.cluster

Horizontal flex layout, wraps automatically, vertically centered by default — button groups, tags, chips.

Commonly used in: tag/chip lists, filter pills, social icon rows, skill badges, button toolbars that need to wrap on small screens.

Design CSS Utilities Framework No JS Zero Build

.centered-row

Flex row, centered on both axes, with default gap.

Commonly used in: hero banners, empty-state screens, icon-plus-label buttons, centered search bars, loading spinners.

One
Two
Three

.centered-col

Flex column, centered on both axes, with default gap.

Commonly used in: empty states, 404 pages, modal/dialog content, onboarding screens, vertically centered hero copy.

One
Two
Three

.between-row

Row, space-between, vertically centered — the toolbar / card-header pattern.

Commonly used in: navbars, card headers, list rows with trailing actions, table header rows, price-plus-CTA rows.

Order #4521 Shipped

.between-col

Column, space-between — pins a footer to the bottom of a fixed-height box.

Commonly used in: pricing cards, equal-height card grids, sidebar panels with a pinned bottom action.

Plan: Growth

Billed monthly, cancel anytime.

.stack

Flex-gap vertical stack, full-width children — distinct from .flow, which uses margin instead of gap.

Commonly used in: forms, settings panels, filter panels, sidebar nav lists, card bodies with several full-width elements.

.center-overlay

Centers content over the nearest position-relative ancestor — loading states, empty states — without dedicated modal markup.

Commonly used in: image/video loading spinners, play-button overlays on thumbnails, "no results" states over charts, hover overlays.

Placeholder background
Loading…

.grid-center

Grid alternative to .centered-col — one-line single-child centering, e.g. an icon inside a badge.

Commonly used in: avatar/icon badges, circular icon buttons, notification dots, single-stat dashboard tiles.

check
star
user

3. Spacing & Flow

The system that controls space between the elements laid out above — gap, child-padding, child-margin, and automatic flow spacing.

Gap utilities

.gap / .gap-1–.gap-4 — Flexbox/Grid gap, no outer edge spacing

Commonly used in: card grids, button groups, form rows, icon lists — anywhere the container is already flex or grid.

gap-1
gap-1
gap-1
gap-4
gap-4
gap-4

Child padding

.child-padding / -1 / -2 / -3 / -4 — padding applied to every direct child

Commonly used in: pricing-table cells, dashboard widget grids, feature-comparison grids, image galleries needing uniform inner spacing.

Child
Child
Child

Child margin

.child-margin / -2 / -3 / -4 — margin on every direct child, for non-flex/grid layouts

Commonly used in: legacy or non-flex block layouts, CMS/WYSIWYG content areas, tag clouds without a flex parent, sidebar widget stacks.

BlockBlockBlock

Flow utilities — fixed steps

.flow-1–.flow-4 — vertical spacing between adjacent children only, at a fixed --space-* step, none before the first or after the last child.

Commonly used in: article bodies, comment threads, timeline entries, changelog lists, FAQ answers.

First child
Second child — spaced above
Third child — spaced above

.page-flow & .main-flow

Same adjacent-sibling pattern as the fixed steps above, but each reads a different token for a different scope of the page:

  • .page-flow reads --page-flow (defaults to 0) — spacing between an element's direct children at the outermost, page-skeleton level. Applied automatically to body > * + *, so <header>, <main>, and <footer> get it with no class needed.
  • .main-flow reads --main-flow (defaults to clamp(6rem, 3.33vw, 12rem)) — a larger, fluid gap for the content sections inside <main>. Applied automatically to main > * + *.

Commonly used in: --page-flow — spacing between top-level page chrome (header/main/footer); --main-flow — spacing between stacked content sections inside the main content area, so sections read as visually distinct without per-section margins.

.page-flow — --page-flow set to 1rem here for the demo (defaults to 0)

First child
Second child — spaced above
Third child — spaced above

.main-flow — --main-flow set to 2rem here for the demo (defaults to a much larger fluid clamp)

First child
Second child — spaced above
Third child — spaced above
TokenDefault valueScopeUtility classAutomatic on
--page-flow0Page skeleton.page-flowbody > * + *
--main-flowclamp(6rem, 3.33vw, 12rem)Sections inside <main>.main-flowmain > * + *
--content-flowvar(--space-1)Prose inside a content container— (automatic only)article/aside/details/blockquote > * + *

Content flow

article, aside, details, and blockquote automatically use --content-flow — no utility class needed.

Commonly used in: blog posts, documentation pages, terms/privacy pages, any long-form article typography.

Automatic spacing

This paragraph, the heading above, and the list below all get consistent top spacing automatically, driven by --content-flow.

  • No .flow class needed
  • Works because the element is an article
← Previous Next →
{C}

Built with love by Kim Majali, EITO team, and contributors.